给大家推荐一款非常好用的表单验证插件:lr-verify.js

时间:2023-11-24 19:40:50

废话不说,直接上代码说明,1分钟学会:

例:

1.验证配置
$.extend(Verify.types, {
"must" : {
"verify" : function(elem) {
if (elem.value == "") {
return "此处为必填项";
} else {
return true;
}
}
},
"num" : {
"verify" : function(elem) {
value = elem.value.trim();
if (value && isNaN(value)) {
return "此处只能填写数字";
} else {
if(value<this.min||value>this.max){
..........
}
return true;
}
}
}
}); 2.提示消息配置
//关闭提示信息,可以自己实现
Verify.my.closePrompt=function(e){//e:验证的元素, } //提示验证信息,可以自己实现
Verify.my.openPrompt=function(e,msg){//e:验证的元素
alert(msg);
} 3.操作事件,提示信息html 等相关配置
Verify.conf.verifyEventsName=["keyup","focus"];//执行验证的事件,可以根据实际情况配置,如click
Verify.conf.closePromptEventsName=["blur"];//关闭提示信息的事件,可以根据实际情况配置,如click
Verify.conf.promptHtml="<div class=\"lrvf-prom-point\">"//提示信息html
+ "<div class=\"lrvf-prom-box\" ></div>"
+ "<span class=\"info\"></span>" + "</div>"; 4.html使用配置:
//使用验证(must:必须是有配置过的)
<input type="text" verify="must" >
//使用多个验证(must和num:必须是有配置过的)
<input type="text" verify="must,num" >
//使用验证,并且自定义属性
<input type="text" verify="must,num:{max:100,min:10}" > 5.函数
/* 手动执行 验证 ,e:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者js对象 ),
isPrompt:是否 提示验证 信息,返回验证不通过的元素和提示信息 [{"elem": elemnt,"msg": "xxx"}]
*/
Verify.doVerify(e,isPrompt) //手动提示,es:要验证的 元素(js对象 ),msg:提示 信息
Verify.openPrompt(e,msg) //手动关闭提示 ,e:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
Verify.closePrompt(e) //手动移除验证元素 ,elems:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
Verify.remove(elems) //手动新增验证元素 ,elems:要验证的 元素 或者 包含 要验证的元素的元素(jquery对象或者 js对象 )
Verify.add(elems)

插件地址:https://gitee.com/lijinlin_index/source

如有疑问请联系QQ:594255598