JQuery Validate使用总结

本文参考了 http://www.cnblogs.com/linjiqin/p/3431835.html

可以在mvc 或webform项目中使用,可以方便快捷的对前端表单进行校验

一、导入两个js文件

*这里需注意，引入的两个文件必须紧挨，否则错误提示显示不出。

二、默认校验规则

(1)、required:true               必输字段

(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值

(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:true             必须输入合法的信用卡号

(10)、equalTo:"#password"        输入值必须和#password相同

(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

三、使用方法，
使用方法有两种，一种是将校验规则直接写到标签中，
另一种是将校验规则写到js文件中
本次主要使用第二种方法
脚本代码如下:

<script>

        $(function () {

            $("#form1").validate({

                rules: {

                    txtName: { required: true },

                    txtMail: {

                        required: true,

                        email: true

                    },

                    txtPwd: {

                        required: true,

                        minlength: 5

                    },

                    txtPwd2: {

                        required: true,

                        minlength: 5,

                        equalTo: "#txtPwd"

                    }

                },

                messages: {

                    txtName: "请输入姓名",

                    txtMail: {

                        required: "请输入Email地址",

                        email: "请输入正确的email地址"

                    },

                    txtPwd: {

                        required: "请输入密码",

                        minlength: jQuery.format("密码不能小于{0}个字 符")

                    },

                    txtPwd2: {

                        required: "请输入确认密码",

                        minlength: "确认密码不能小于5个字符",

                        equalTo: "两次输入密码不一致不一致"

                    }

                }

            });

        });

    </script>

html代码如下:

 <div>

        <form method="post" action="@Url.Action("Regerster", "UserInfo")" id="form1">

            用户名:<input type="text" name="txtName" id="txtName" /><br />

            密码:<input type="password" name="txtPwd" id="txtPwd" /><br />

            确认密码:<input type="password" name="txtPwd2" id="txtPwd2" /><br />

            邮箱:<input type="text" name="txtMail" id="txtMail" /><br />

            <input type="submit" value="提交" />

        </form>

    </div>

巴特西

JQuery Validate使用总结

最新文章

热门文章