給你們推薦一款很是好用的表單驗證插件：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