jQuery

validation 插件

Validation 是一个优秀的表单验证插件。

1.快速上手
首先引入Validation库。

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

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="required email" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="url" id="curl" name="url" size="25"  value="" />
   </p>


   $('#commentForm').validate();

2.不同的写法
第一种写法

这种写法需要引入一个支持固定格式解析的jQuery插件，Validation将其很好的融合进验证规则编码中。

<p>
     <label for="cusername">姓名</label>
     <em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input class="{validate:{url:true}}" id="curl" name="url" size="25"  value="" />
   </p>

   $('#commentForm').validate({meta:"validate"});

第二种方法
不将验证规则写在 class 属性中，而写在javascript代码中。

$('#commentForm').validate({
        rules:{
            username:{
                required:true,
                minlength:2
            },
            email:{
                required:true,
                email:true
            },
            url:"url",
            comment:"required"
        }

     });

3.默认校验规则