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

废话不说,直接上代码说明,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






posted @ 2018-09-29 17:54  李京霖  阅读(910)  评论(0编辑  收藏  举报