初探valiDate.js插件

最新推荐文章于 2021-02-09 11:42:08 发布

Muscle_Mliu

最新推荐文章于 2021-02-09 11:42:08 发布

阅读量368

点赞数

分类专栏： js插件

本文链接：https://blog.csdn.net/liuzijiang1123/article/details/54632684

版权

js插件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

仅从一个新手的角度去学习使用这个插件，并实现一些简单的功能。

github:https://github.com/liuzaijiang/validate.js-Demo

版本信息:

validate.js: 1.16.0

jquery.js: 3.1.1

1.对于插件的调用

———————————————————————————————————————

我这里用的是html和js分离的方法，用纯的js去调用插件，并没有去把一些参数和规则写在html里面,而且这里的验证是基于表单的，所以这里是首先为表单使用$("#myform").validate({...}),然后在里面实现参数的设置及表单里面具体的某一个元素进行规则的定义（使用的是它们的name值作为索引）。

2.对于触发方式的选择

———————————————————————————————————————

由于这边默认是onblur事件（它里面的onfocusout这个方法），个人感觉不是很友好，所以这里可以再引入onfoucs事件去触发或者onkeyup去触发（还有onclick）。

形如：

	onfocusin:function(element){
	    $(element).valid(); 
	},
	onkeyup:function(element){
	    $(element).valid(); 
	},

3.对于一些其他的公共属性和方法

———————————————————————————————————————

debug: true, //调试模式取消submit的默认提交功能

errorClass: "error", //默认为错误的样式类为：error （css中是 label.error）

focusInvalid: true, //当为false时，验证无效时，没有焦点响应

errorElement： "label" // 错误提示的元素（默认label）

  highlight: function(element, errorClass) {
    //验证出错时的触发函数
    },

unhighlight: function(element, errorClass) {
//验证成功时的触发函数
},

success:String,Callback（既可以传字符串，也可以传函数，前者是验证成功时的样式，后者同样是成功后的执行代码）

/* success和unhighlight都可以用于整个表单的验证成功时的操作，也可以用于具体某一个元素验证成功后的操作。不过succss还可以传字符串作为成功后的样式*/

errorPlacement: function(error, element) {
//错误信息的摆放位置,error是要摆放的错误信息的元素，element是出错的具体元素
},

submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
        form.submit();   //提交表单
   },

4.验证规则

——————————————————————————————————————

具体的规则我们写在rules这个属性中

rules:{

myname:{ // 需要验证的表单中元素的name值
required:true, // 这里就是具体的规则，这个是自身带的一个属性，必填

......
},

........

}

当然还有每个规则下对应的错误信息提示,我们写在messages这个属性中

    messages:{ // 格式是与规则中一一对应
                    myname:{
                        required:"必填",

.........
},

........

}

下面是默认提供的一些规则

规则	描述
required:true	必须输入的字段
required: "#aa:checked"	表达式的值为真，则需要验证。
required: function(){}	返回为真，表示需要验证
remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
email:true	必须输入正确格式的电子邮件。
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
number:true	必须输入合法的数字（负数，小数）。
digits:true	必须输入整数。
creditcard:true	必须输入合法的信用卡号
equalTo:"#field"	输入值必须和 #field 相同
accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
range:[5,10]	输入值必须介于 5 和 10 之间。
max:5	输入值不能大于 5。
min:10	输入值不能小于 10