表單驗證的做法

標籤：密碼   簡單   ade   ++   dialog   call   hone   方法   情況   

function checkForm(from){    var from_text = $(from).find(‘input[type=text],input[type=password]‘),    isok = true,    Prompt = [        {            Type : "user",            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,            msg : "請填寫使用者名稱",            tipe : "使用者名稱不可為空"        },{            Type :"psw",            reg :/^[a-zA-Z0-9_]\w{5,17}$/,            msg : "密碼長度為6-18位字元數字",            tipe : "密碼不可為空"        },{            Type : "name",            reg : /^[\u4e00-\u9fa5]{1,10}[·.]{0,1}[\u4e00-\u9fa5]{1,10}$/,            msg : "請填寫正確連絡人",            tipe : "連絡人不可為空"        },{            Type :"phone",            reg : /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,            msg : "請填寫正確電話號碼",            tipe : "電話號碼不可為空"        }    ];    from_text.each(function(i){        var val = $(this).val(),        name = $(this).attr("name"),        tip = $(this).attr("myAttr"),        num = Prompt.length;        if(tip){            if (val == "") {                alert(tip+"不可為空");                 isok = false;                return false            };            for (var j = 0; j < num; j++) {                if (name == Prompt[j].Type) {                    if(!Prompt[j].reg.test(val)){                        alert(Prompt[j].msg);                        isok = false;                        return false;                    };                };            };         }      })    return isok;}

這是之前自己寫的表單驗證，缺點還是挺多需要依賴name屬性來做驗證尋找（有對應name屬性的進行驗證沒有的不驗證），空的提示內容寫在input的myttr屬性裡，每個表單的特別提示寫在Prompt裡面，依靠迴圈找到對應name進行驗證 

如果我在Prompt裡面寫很多的驗證種類那麼不就要迴圈好多次了（效率太低了咯！！！汗！！！），而且最不好的一點如果一個頁面裡有2個手機驗證而且要提交不一樣的name呢那怎麼搞那同樣的驗證不一樣name要寫2個（這不科學啊！！！）

哎呦！最近進了新公司發現同事們寫的封裝性什麼的都比我強太多了貼出來對比一;

(function (win, lib) {    var patientInfo = {        youngYear: 14,        realNameReg: /^([a-z]|[A-Z]|[\u2E80-\u9FFF]){1,8}/,        cardNumReg: /^([a-z]|[A-Z]|\d){1,18}/,        idCardReg: /^\d{17}([a-z]|[A-Z]|\d){1}/,        phoneReg: /^\d{11}$/,        verify: function (el, verifyReg, verifyAlert, ignoreNull) {            var verifyText = el.val().replace(/\t+/g, "").replace(/\n+/g, "").replace(/\r+/g, "").replace(/\s+/g, "");            if (verifyText == "") {                if (ignoreNull) {                    return false;                }                lib.hkDialog({                    type: 3,                    sureCallBack: function () {                    },                    content: verifyAlert + ‘不可為空‘,                    sureTxt: ‘我知道了‘                });                return true;            }            if (!verifyReg.test(verifyText)) {                lib.hkDialog({                    type: 3,                    sureCallBack: function () {                    },                    content: ‘請輸入正確的‘ + verifyAlert,                    sureTxt: ‘我知道了‘                });                return true;            }            return false;        }    }，

//這是完美分割線----------------------------------------------------------------------------------------------
//下面是調用

submitFun: function() {　　var that = this;

　　$(‘.p-save‘).on(‘tap‘, function(e) {
　　　　var PActive = $(‘.p-active‘);
　　　　//名字
　　　　var name = PActive.find(‘.p-name‘);
　　　　if(that.verify(name, that.realNameReg, ‘真實姓名‘)) {return}
　　　　//驗證完事true就是不通過
　　　　//下面還有點什麼不重要的東西就不管了
　　}

document.addEventListener(‘DOMContentLoaded‘, function (e) {        patientInfo.init();    }, false);})(window, window[‘lib‘] || (window[‘lib‘] = {}));

先說明下咯這個代碼並不全（有一些其他的相依元件），lib代表的是我們封裝起來的其他公用調用的方法庫（或者說組件調用的），像lib.hkDialog就是指的調用了一個類似彈窗提示的組件（簡單說就是alert咯）哇！這樣的封裝很好啊！！！我又get到新技能了呢！下面還是講講這個組件的實現吧！

最上邊那些正則其實和我寫的那個是一個道理就是把要用來驗證的方法,有3個參數一個是要驗證的value,一個是上吧的驗證正則，一個是提示，還有一個是可否為空白的選項

然後是去空格什麼的，先判斷ignoreNull如果是true就是可以空咯（然而我剛看到這裡的時候我就想如果我想要不可為空又不要驗證怎麼辦哦！！！我真是豬了！這樣的情況直接去頭尾空格然後判斷是否為空白不就完了！汗顏！！！）

驗證完事true就是不通過（why？我都習慣返回是fales是不通過的，反了反了！可以少寫一個！，我之前用這個找了好久問題後來看裡面代碼才發現的）

這個verify驗證裡面寫得東西好少啊！但是這樣用起來更加靈活了呢，

還比我的少了迴圈效率更好，

驗證內容和正則傳進去，提示傳進去基本上就可以了！用起來更方便靈活，以後就用這個吧！（不過我還是想把他返回的true和false反過來！嘿嘿！）

表單驗證的做法