一度讓我頭大到起飛的表單驗證

晴雨稀兮發表於2018-06-22

表單驗證在前端開發中非常非常常見，每次有需求時都不得不百度，匆匆忙忙，沒有積累，也很零散。今天心血來潮想把它整理出來，有些粗糙，後續會繼續修改 ^_^.

step1： 首先定義一個Validator表單驗證物件

var Validator = {
    isNoEmpty: function(){}, // 判斷是否為空
    maxlength: function(){}, //最大長度限制
    isID: function(){}, // 身份證號碼校驗
    isMobile: function(){}, // 手機號校驗
    isChineseName: function(){}, //中文名校驗
    onlyNum: function(){}, // 只能輸入兩位小數
    
};

step2： 在對應的HTML頁面中使用時，只需要建立這個例項物件，呼叫對應的方法即可，如下：

 var validator = Object.create(Validator);
 var isMobile = validator.isMobile(mobile, mobile.val(), `請輸入正確的手機號碼`);
 var isID = validator.isID(ID, ID.val(), `請輸入正確的身份證號碼`);

step3： 補充Validator物件中的每個校驗方法

1. 判斷是否為空

三個引數：
element：當前的DOM節點
value： 當前表單中的值
errMsg： 錯誤提示資訊

isNoEmpty: function (element, value, errMsg) {
    if(value === ``){
      return {
        type: `isEmpty`,
        errMsg: errMsg
      }
    }
    return true;
},
2.最大長度限制

四個引數：
element：當前的DOM節點
value： 當前表單中的值
errMsg： 錯誤提示資訊
length：最大長度值

maxlength: function(element, value, errMsg, length){
    if(value.length > length){
      return {
        type: `overMaxlength`,
        errMsg: errMsg
      }
    }
    return true;
},
3.身份證號碼校驗

三個引數：
element：當前的DOM節點
value： 當前表單中的值
errMsg： 錯誤提示資訊

isID: function(element, value, errMsg){
    var reg = /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/;
    if(!reg.test(value)){
      return {
        type: `isNoID`,
        errMsg: errMsg
      }
    }
    return true;
 },
4.手機號校驗

三個引數：
element：當前的DOM節點
value： 當前表單中的值
errMsg： 錯誤提示資訊

isMobile: function(element, value, errMsg){
    var reg = /^\d{11}$/;
    if(!reg.test(value)){
      return {
        type: `isNoMobile`,
        errMsg: errMsg
      }
    }
    return true;
},
5.中文名校驗

三個引數：
element：當前的DOM節點
value： 當前表單中的值
errMsg： 錯誤提示資訊

isChineseName: function(element, value, errMsg){
    var reg = /^([u4E00-uFA29]|[uE7C7-uE7F3]){2,}$/;
    if(!reg.test(value)){
      return {
        type: `isNoChineseName`,
        errMsg: errMsg
      }
    }
    return true;
},
6.只能輸入最多含有兩位小數的數字

一個引數：
value：當前文字框的值
tips：在呼叫時可傳入this.value,即this.value = validator.onlyNum(this.value)
這樣就能保證你修改的就是當前文字框物件的值，因為物件屬於引用型別，如果沒有深拷貝，則會修改它本身。

onlyNum: function(value){
    var newValue = value;
    newValue = newValue.replace(/[^d.]/g,``); // 只留下數字和小數點
    newValue = newValue.replace(/.{2}/g,`.`); // 只保留第一個小數點，清除多餘的
    newValue = newValue.replace(`.`,`$#$`).replace(/./g,``).replace(`$#$`,`.`);
    newValue = newValue.replace(/^(-)*(d+).(dd).*$/, `$1$2.$3`); // 只能輸入兩位小數
    if(newValue.indexOf(`.`)<0 && newValue !=``){
      newValue = parseFloat(newValue); // 保證如果沒有小數點，首位不能是01，02這種金額出現
    }
    return newValue;
  }

強制數字保留兩位小數時，使用toFixed(); 即 var num = parseFloat(num).toFixed()

繼續更新中……

相關文章