jQuery form validation plugins （摘录，挺受启发，备用）

阅读更多

表单验证一直是一个大问题，但是有了jquery，有了form validation plugins，一切就变得简单了。

点此查看官方说明文档

来看个简单的例子：http://www.live-my-life-with-yuyi.com/lab/jquery/validation/

下载  http://formvalidator.vicp.cc/download.html

实现代码：

1. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. "http://www.w3.org/1999/xhtml">
4. "Content-Type" content= "text/html; charset=utf-8" />
6. "stylesheet" type= "text/css" media= "screen" href= "css/screen.css" />

先载入4个js文件，放心这四个文件都很小

1. $. meta. setType ( "attr", "validate" );

这句话的意思是设置一个标签，然后在这个标签里，定义相关的属性，比如required,minLength等等

1. $. validator. setDefaults ( {
2. submitHandler: function ( ) { alert ( "submitted!" ); }
3. } );

这个函数会在所有验证都通过时触发，提交表单。

 

1. $ ( "#commentForm" ). validate ( {
2. messages: {
3. cname: "请输入用户名",
4. cemail: {
5. required: "电子邮件不能为空",
6. email: "电子邮件格式不正确"
7. },
8. curl: "URL格式不对",
9. ccomment: "留言不能为空"
10. }
11. } );

这个是自定义错误信息，属性对应的是表单项的name，值对应的是当验证不通过时的错误信息。就这么简单，验证部分就做完了。

再来看看表单部分

1. class="cmxform" id="commentForm" method="get" action="">
3. A simple comment form with submit validation and default messages
5. for="cname">Name (required, at least 2 characters)
6. id="cname" name="cname" class="some other styles " validate = "required:true,minLength:2" />
8. for="cemail">E-Mail (required)
9. id="cemail" name="cemail" validate = "required:true,email:true" />
12. for="curl">URL (optional)
13. id="curl" name="curl" validate = "url:true" value="" />
16. for="ccomment">Your comment (required)
17. id="ccomment" name="ccomment" validate = "required:true">
20. class="submit" type="submit" value="Submit"/>
23. for="spam_email">
24. type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />
25. Spam via E-Mail
27. for="spam_phone">
28. type="checkbox" id="spam_phone" value="phone" name="spam" />
29. Spam via Phone
31. for="spam_mail">
32. type="checkbox" id="spam_mail" value="mail" name="spam" />
33. Spam via Mail
35. for="spam" class="error">请至少选择两个选项

比正常的表单多出来的一项就是validate，这个在之前的js里已经设置过了，这里面就定义了该表单项的验证信息，如是否是必填，最短长度，是否为email等等。

这句话看起来比较有意思

1. for="spam" class="error">请至少选择两个选项

当class的值为error时，默认是被隐藏的，只有当提交表单进行验证并出错时才会显示，同时这个for也是必不可少的，for的内容对应的是要监视的表单项。

其实最终促成我写这篇文章的原因是，从官方下载的插件在ie6下无效，经过近3个小时的追查，终于发现在jquery.validate.js里，url验证那块有乱码，结果直接导致ie6不能运行（在FF和IE7下正常）。于是我修改了一下，终于可以通过IE6了。