jQuery 表单验证插件——Validation

      Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:

• 内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
• 可以自定义验证规则：可以很方便地自定义验证规则
• 简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能
• 实时进行验证的功能.：通过blur和keyup时间来触发验证规则

      此外，还是用ajax实现了服务器端远程验证。 都可以令前台开发变得非常的简单.
 
      下载地址：http://plugins.jquery.com/project/vlidate
写法一（推荐直接使用写法三，因为它实现了行为与结构的分离）
 
      废话少说，代码解释：

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script src="lib/jquery.validate.js" type="text/javascript"></script><script type="text/javascript">  $(document).ready(function(){    $("#commentForm").validate();  });  </script> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset>   <legend>一个简单的验证带验证提示的评论例子</legend>   <p>     <label for="cusername">姓名</label>     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />   </p>   <p>     <label for="cemail">电子邮件</label>     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />   </p>   <p>     <label for="curl">网址</label>     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />   </p>   <p>     <label for="ccomment">你的评论</label>     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>   </p>   <p>     <input class="submit" type="submit" value="提交"/>   </p> </fieldset> </form>

验证效果：

jQuery <wbr>表单验证插件——Validation(基础)

      上面绿色标出的部分是需要注意的部分，也是validation执行验证的部分。可以看到validation统计一段$("#commentForm").validate();便可完成原来繁重任务。你可能会问，他的验证规则在哪里啊，为什么获取一个form表单元素连上一个validate()便可完成验证。其实validation把验证规则都封装在了内部，还记from表单里标出的class和minlength属性么，它可以来调去告诉其自身所在input元素所用的验证规则，如：<input type='text' class='required' > ,这个input框就会被validation解释为必须填写的。此外：
 minlength最少输入字符，class里的包括  required 必须、email 电子邮件、 url 网址、
其他验证的写法
写法二
      上面的方法时而将验证信息写在class中，时而写在minlength中实在麻烦，validation充分考虑了这一点，设置了另一种方法，将与验证相关的信息都写在class属性中，便于管理。操作步骤如下：

1. 引入插件——jquer.metadata.js
2. 改变验证方法为：$("formId").validate( {meta: "validate"} );   validate是自定义的，但要和 下文class中的保持一致
3. 将验证规则全部写入class属性中（表单中input元素要添加name值，否则提交时只会验证第一个input元素，其他的在点击后才会验证）

<input id="cusername" name="username" size="25"  class="{validate: {required: true , minlength：2}}" value="" /><input id="cemail" name="email" size="25"  class="{validate：{required: true , email: true}}" value="" /><input id="curl" name="url" size="25"  class="{validata：{ url: true }}" value="" /><textarea id="ccomment" name="comment" cols="22"  class="{validata: {required: true }}"></textarea>

写法三
      上面的写法并没有完全脱离HTML结果，下面介绍一种与HTML元素属性无直接关联，而是通过name属性来关联字段和验证规则的验证写法。这种写法实现了行为与结构的分离。
      1 将原来的class属性移除，使其无多余的属性：

<input id="cusername" name="username" size="25"   value="" /><input id="cemail" name="email" size="25"   value="" /><input id="curl" name="url" size="25"  value="" /><textarea id="ccomment" name="comment" cols="22" ></textarea>

      2 jQuery代码如下：

$("#formId").validate({rules : {  //增加rules属性username: { required : true , minlength : 2} ,  email : { required : true , email : true} ,url : "url" ,comment : "required"}})

验证信息
      Validation插件的验证信息默认是英文的，如果要改为中文，只需要引入validation提供的中文验证信息库即可，引入代码如下：

<script src ="../jquery.validate.messages_cn.js" type="text/javascript"></script>

自定义验证信息
      Validation插件可以很方便地自定义验证规则，用来代替千遍一律的默认验证信息。如：

<input id="cusername" name="username" size="25"  class="{validate: {required: true , minlength：2 , message:{required : '请输入姓名' , minlength : '请至少输入两个字符'}}}" value="" /><input id="cemail" name="email" size="25"  class="{validate：{required: true , email: true , message:{required : '请输入邮箱' , email: '请检查邮箱格式是否正确'}}}" value="" /><input id="curl" name="url" size="25"  class="{validata：{ url: true , message:{url: '请输入网址' ,}}}" value="" /><textarea id="ccomment" name="comment" cols="22"  class="{validata: {required: true  , message:{required : '请输入您的排列' }}}"></textarea>

      如在jquery代码里加messages的话是和rules同级

$("#formid").validate({rules:{username:{required:true,minlength:2},},messages:{username:{required:"必须填写",minlength:"最少2个字符"}}});

自定义验证信息并美化
      在jquery中（与rules同级）添加下列代码：

errorElement : "em", //用来创建错误提示信息标签(可自定义)Success : function(label){    //验证成功后执行的回调函数，label指向上面那个错误提 示信息标签emlabel.text( ' ' )  //清空错误提示消息. addClass("success")  //添加上自定义的success类}

      再在css中给em.error 和 em.success设置样式（如背景分别为错号和对号等）
自定义验证规则
      创建规则：

$.validator . addMethod("formula",     //自定义规则方法名function(value , element , param){   /自定义规则体return value == eval_r(param);},'请输入正确的数学公式计算后的结果'   //提示信息)

调用：
      Rules中加入valcode :( 自定义规则名 : "参数")

$("#formId").validate({rules : {  //增加rules属性username: { required : true , minlength : 2} ,  email : { required : true , email : true} ,url : "url" ,comment : "required" ,valcode : (formula : "7+9")  //valcode为name的值}})

Validation的具体属性及高级应用见下面链接：
      http://wenku.baidu.com/view/1283e485ec3a87c24028c48a.html
自定义验证规则：
      http://www.jb51.net/article/24013.htm