一度讓我頭大到騰飛的表單考證

2023年5月25日 156次阅读 来源: 晴雨稀兮

表單考證在前端開闢中異常異常罕見，每次有需求時都不得不百度，匆匆忙忙，沒有積聚，也很零星。本日心血來潮想把它整理出來，有些粗拙，後續會繼承修正 ^_^.

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+)\.(\d\d).*$/, '$1$2.$3'); // 只能輸入兩位小數
    if(newValue.indexOf('.')<0 && newValue !=''){
      newValue = parseFloat(newValue); // 保證假如沒有小數點，首位不能是01，02這類金額湧現
    }
    return newValue;
  }

強迫数字保存兩位小數時，運用toFixed(); 即 var num = parseFloat(num).toFixed()

繼承更新中……

    原文作者：晴雨稀兮
    原文地址: https://segmentfault.com/a/1190000015358169
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞