JQuery的validation插件

插件获取途径

JQuery官方网站
Validation下载地址

简介

Validation–一个优秀的表单验证插件。
内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。
自定义验证规则：可以很方便地自定义验证规则。
简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
实时验证：可以通过keyup或blur事件触发验证，而不仅仅是在表单提交的时候验证。

一个例子

步骤1、引入JQuery库和Validation插件。

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

步骤2、确定哪个表单需要被验证

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

步骤3、针对不同的字段，进行验证规则编码，设置字段相应的属性。
class=“required”为必须填写，minlength="2"为最小长度为2。
class=“required email”为必须填写和内容需要符合E-mail格式。
class="url" 为url格式验证。

不同的验证写法

步骤1、引入一个新的jQuery插件jquery.metadata.js。

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


3、将验证规则全部编写到class属性中

<p>
 <label for="cusername">姓名</label><em>*</em>
 <input id="cusername" name="username" size="25" class="{validate:{required:true,minlength:2}}"/>
 </p>
 <p>
 <label for="cemail">电子邮件</label><em>*</em>
 <input id="cemail" name="email" size="25" class="{validate:{required:ture,email:true}}"/>
 </p>
 <p>
 <label for="ccomment">你的评论</label><em>*</em>
 <textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
</p>

---

第三次改写，移除字段中的class属性，并实现行为与结构的分离。

1、在$(“#commentForm”).validate()方法中增加rules属性。
2、通过每个字段的name属性 值来匹配验证规则。
3、定义验证规则：例如 required:true，email:true,minlength:2 等。
然后加入如下代码

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