比较常见的表单验证功能
http://www.javaeye.com/topic/293234
当在网站中使用jQuery时，我们必须时常提醒自己如果用户禁用了JavaScript，那么页面看起来会怎样、功能是否还健全（当然，除非我们 知道用户是谁，而且知道他们会怎样配置浏览器）。但是，这并不意味着我们不能为JavaScript的用户创建更美观或者功能更强大的网站。渐进增强 的原则在JavaScript开发者中间如此流行，就是因为它在为多数人提供额外功能的同时，还能照顾到全体用户的需求。
效果图如下：
如果我上面这个示例用户禁用了js，效果图如下：
此时内容结构还是一样的清晰明了。
下面来看一下过程：
Html代码
- <fieldset>
- <legend>Personal Info</legend>
- <form action="">
- <ol>
- <li>
- <label for="first-name">First Name</label>
- <input class="required" type="text" name="first-name" id="first-name"/>
- <span>(required)</span>
- </li>
- <li>
- <label for="last-name">Last Name</label>
- <input class="required" type="text" name="last-name" id="last-name"/>
- <span>(required)</span>
- </li>
- <li>
- How would you like to be contacted?(choose at least one method)
- <ul>
- <li>
- <label for="by-email"><input type="checkbox" name="by-contact-type" value="E-mail" id="by-email"/>by E-mail</label>
- <input class="contional" type="text" name="email" id="email" />
- <span>(required when corresponding checkbox checked)</span>
- </li>
- <li>
- <label for="by-phone"><input type="checkbox" name="by-contact-type" value="phone" id="by-phone"/>by Phone</label>
- <input class="contional" type="text" name="phone" id="phone" />
- <span>(required when corresponding checkbox checked)</span>
- </li>
- <li>
- <label for="by-fax"><input type="checkbox" name="by-contact-type" value="fax" id="by-fax"/>by Fax</label>
- <input class="contional" type="text" name="fax" id="fax" />
- <span>(required when corresponding checkbox checked)</span>
- </li>
- </ul>
- </li>
- </ol>
- <input type="submit" value="send" id="send"/>
- </form>
- </fieldset>
1.通常表单会用fieldset来构建。
fieldset：用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。
legend： 在 fieldset 对象绘制的方框内插入一个标题。
由于legend的样式兼容性很差（这里我就不讲是怎么兼容的了），我们就用js把legend标签替换成h3标题标签
Js代码
- var heading = $("legend","fieldset").remove().text();
- $("<h3></h3>").text(heading).prependTo("fieldset");
2.在这个联系表单中，必填字段都带有class=”require“以便应用样式和响应用户的输入；而每种联系方式的输入都带有class="conditional"。
首先清理必填字段的提示信息
Js代码
- var requiredFlag = "*";
- var requiredKey = $("input.required:first").next("span").text();
- requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/,"$1");
- var conditionalFlag = "**";
- var contionalKey = $("input.contional:first").next("span").text();
- contionalKey = conditionalFlag + contionalKey.replace(/^\((.+)\)$/,"$1");
- $("<p></p>").addClass("field-key").append(requiredKey + "<br />").append(contionalKey).insertBefore("fieldset:first");
- $(":input").filter(".required").next("span").text(requiredFlag).end().prev("label").addClass("req-label");
- $(":input").filter(".contional").next("span").text(conditionalFlag);
设置两个标记变量requiredFlag和conditionalFlag,向每个必填的span中分别填入这两个变量。再把提示信息保存到另外两个变量requiredKey和contionalKey中，并且将每个标记与相应的信息（去掉了原括号）连接起来。
这里用了正则表达式以及replace方法。
.replace(/^\((.+)\)$/,"$1");
^:表示后面跟着的应该是字符串的开始位置。
\(\):原括号，\用于转义。
(.+):查找一个或多个同一行的任意字符。
$:字符串的结束位置。
$1:代表的是位于圆括号内部但不包含圆括号的所有字符。
由于必填是一个*号，可能不会立即吸引用户的注意力，所以还需要为每个必填字段的<label>添加class=“req-label”,让每个必填字段的<label>变成粗体
创建一个新的段落，把requiredKey和contionalKey添加到这个段落中，再将这个段落插入到联系表单的前面。
3.我们再围绕询问用户愿意使用哪种联系方式来进一步增强这组字段。因为只有当用户选择了相应的复选框之后，才需要填写后面的文字输入字段，所以可以在文档加载完成后首先隐藏他们。
Js代码
- $("input.contional").each(function(){
- var $thisInput = $(this);
- var $thisFlag = $thisInput.next("span").hide();
- $thisInput.prev("label").find(":checkbox").click(function(){
- if(this.checked){
- $thisInput.show().addClass("required");
- $thisFlag.show();
- $(this).parent("label").addClass("req-label");
- }
- else{
- $thisInput.hide().removeClass("required").blur();
- $thisFlag.hide();
- $(this).parent("label").removeClass("req-label");
- }
- });
- });
当用户单击复选框时，需要检查复选框是否被选中；如果是，则显示文字输入字段，显示提示标记，然后再为对应的label添加加粗的样式。否则，隐藏条件元素并移除加粗样式。
4.表单验证
在通过jQuery向表单添加验证功能之前，必须记住一条重要的规则：客户端验证不能取代服务器端验证。同样，也不能依赖用户启用javascript。使用jQuery的客户端表单验证具有服务器端无法比拟的一个优势--即时反馈 。服务器端代码，无论是ASP、PHP，还是其他的什么，都需要重载页面才能生效。通过jQuery，可以在必填字段失去焦点(blur)或者用户按下某个键盘按键时，利用灵活的客户端代码实现验证功能
必填的验证
~~~~~~~~~~~~~~~~~~~http://www.javaeye.com/topic/293234