当前位置：首页 > news >正文

表单验证插件----jquery validation

news 来源：原创 2024/5/19 22:19:42

1、下载地址：http://jqueryvalidation.org/

2、使用方法：

<script type="text/javascript" src="http://www.xftz.cn/templets/yuanyou/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
jquery表单对象.validate()

3、validade()方法

作用：验证选中的表单，传入一个配置对象用于对验证进行各种配置。

3.1.1、rules

作用：为各种表单元素添加各种验证规则

类型：object

使用方法：rules：{

　　　　name属性值：{

　　　　验证规则1,

　　　　验证规则2,

　　　　...

　　　　}...

}

3.1.2、内置的验证规则：

1)、required：必须输入的字段

使用：required：true，如果这个标签只有这一条验证规则，可以简写：name属性值："required"

2)、minlength:最小字符长度

3)、maxlength:最大字符长度

4)、rangelength:字符长度必须介于某个区间

使用：rangelength：[2,3]

5)、min：输入值被允许的最小值（数字）

6)、max：输入值被允许的最大值（数字）

7)、range:[5,10]，输入值必须介于某个区间

8)、number：true，必须是合法的数字

9)、digits:true,必须是整数

10)、email:true,必须是正确的邮箱

11)、url:true,必须是正确的网址

12)、equalTo：jq选择器，输入值必须和给定选择器的值相同

13)、remote：{

　　　　　　url："check_email.php",

　　　　　　type:"post",

　　　　　　data:{

　　　　　　　　username:"xulinjun"

　　　　　　}

使用ajax方法，调用服务器端脚本，验证输入值

14)、extension：限定特定格式的后缀名，多个用"|"隔开，（需要引入additional-methods.min文件）

4、提示信息的汉化

4.1、直接引入汉化包

<script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>

4.2、messages

如果需要在validate()方法内修改提示信息，则可以使用本方法，

自定义的提示信息，key：value的形式，key是要验证的元素，value可以是字符串或函数，举例：

messages:{
                username:{
                    required:"必须填写"
                },
            　　username1:{
                    required:"必须填写",
                    equalTo:"俩次输入不一致"
                }
            }
//这里rules上面的值，messages里面可以同步使用，{0}代表第一个，{1}代表第二个...举例：

username:{
　　required:"必须填写",
　　min:"最小的值必须是{0}"
}

5、submitHandler

类型：function(form)

说明，通过验证后运行的函数，默认添加该函数则不会再提交除非手动提交或者使用return true，

函数参数：该函数接收一个参数，表示当前表单dom对象

6、invalidHandler(event,validator)

说明，当一个无效的表单（即验证不通过的时候）被提交的时候触发这个函数

函数参数：当前验证的表单validator对象

7、errorClass（默认值error）

类型：string

说明：指定错误提示与验证不通过的控件的css类名

8、validClass（默认值：valid）