jQuery validate插件初探

jQuery的validate插件，在jQuery验证时使用非常方便。

具体使用步骤：

1.引入文件

<script src="/js/class/jquery-1.3.2.min.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.validate.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.metadata.js" type="text/javascript" ></script>
        <script src="/js/class/jquery.validate.messages_cn.js" type="text/javascript" ></script>

既然是jQuery插件，必须要有jQuery作为支持jquery-1.3.2.min.js

然后是验证的核心文件jquery.validate.js

然后是快捷使用文件，使得可以直接在表单中写验证条件jquery.metadata.js

然后是中文提示支持其中的内容很简单

/*
 * Translated default messages for the jQuery validation plugin.
 * Language: CN
 * Author: Fayland Lam <fayland at gmail dot com>
 */
jQuery.extend(jQuery.validator.messages, {
        required: "<font color='#E15B50'>必选字段</font>",
        remote: "<font color='#E15B50'>请修正该字段</font>",
        email: "<font color='#E15B50'>请输入正确格式的电子邮件</font>",
        url: "<font color='#E15B50'>请输入合法的网址</font>",
        date: "<font color='#E15B50'>请输入合法的日期</font>",
        dateISO: "<font color='#E15B50'>请输入合法的日期 (ISO).</font>",
        number: "<font color='#E15B50'>请输入合法的数字</font>",
        digits: "<font color='#E15B50'>只能输入整数</font>",
        creditcard: "<font color='#E15B50'>请输入合法的信用卡号</font>",
        equalTo: "<font color='#E15B50'>请再次输入相同的值</font>",
        accept: "<font color='#E15B50'>请输入拥有合法后缀名的字符串</font>",
        maxlength: jQuery.format("<font color='#E15B50'>请输入一个长度最多是 {0} 的字符串</font>"),
        minlength: jQuery.format("<font color='#E15B50'>请输入一个长度最少是 {0} 的字符串</font>"),
        rangelength: jQuery.format("<font color='#E15B50'>请输入一个长度介于 {0} 和 {1} 之间的字符串</font>"),
        range: jQuery.format("<font color='#E15B50'>请输入一个介于 {0} 和 {1} 之间的值</font>"),
        max: jQuery.format("<font color='#E15B50'>请输入一个最大为 {0} 的值</font>"),
        min: jQuery.format("<font color='#E15B50'>请输入一个最小为 {0} 的值</font>")
});

就这么些语句，可以根据自己的需要进行修改。

2.设置作用对象

$("#form1").validate({   
                submitHandler:function(form){
                    form.submit();
                }
            });

上面的代码告诉插件要对id为form1的表单进行验证

其中

submitHandler:function(form){
                    form.submit();
                }

是表示人为的设置提交表单。当验证成功的时候会提交表单。

如果没有这段代码，其实也一样，验证成功后会提交表单。

而验证什么时候被激活呢？就是#form1表单有提交动作的时候被激活。

所以下面的代码也很有必要：

//提交
            $(".make_sure").click(function(){
                $("#form1").submit();
            });

当点击按钮时，执行提交动作！由于有验证插件的存在，所以提交必须要走一下验证的流程，只有通过了验证，才能真正的提交表单。

3.设置验证规则

由于有了jquery.metadata.js的帮助，验证规则设置变得非常的便捷。

在相应的表单元素中设置class属性即可。

class="required number"

等等。

具体的验证规则有很多，如下：

(1)required:true                必输字段
(2)remote:"check.php"      使用ajax方法调用check.php验证输入值
(3)email:true                    必须输入正确格式的电子邮件
(4)url:true                        必须输入正确格式的网址
(5)date:true                      必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true                 必须输入合法的数字(负数，小数)
(8)digits:true                    必须输入整数
(9)creditcard:                   必须输入合法的信用卡号
(10)equalTo:"#field"          输入值必须和#field相同
(11)accept:                       输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10              输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]      输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                        输入值不能大于5
(17)min:10                       输入值不能小于10

设置好验证规则之后，插件就会帮助你进行相应的验证了。

截图如下：

如果通过验证，就会跳转到后台！完成表单提交动作！