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

raise_yang 發布于2019-08-22 18:12 / 1394人閱讀

摘要：表單驗證在前端開發中非常非常常見，每次有需求時都不得不百度，匆匆忙忙，沒有積累，也很零散。只留下數字和小數點只保留第一個小數點，清除多余的只能輸入兩位小數保證如果沒有小數點，首位不能是，這種金額出現強制數字保留兩位小數時，使用即繼續更新中

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

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()

繼續更新中……

云服務器 GPU云服務器提示，html5的表單驗證驗證表單表單驗證表單驗證代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95617.html

lnmp環境下使用workerman報502 Bad Gateway

摘要：今天使用做聊天室功能的時候遇到一個問題，我用集成包重新安裝了系統環境比較方便，然后和以前一樣幫虛擬機等都配置好了，進入開發模式，可是當我啟動以后，去訪問聊天室報網關錯誤這我頭大了，以前用好好的，這次怎么遇到問題了，不過沒關系我們來檢查下因為今天使用workerman做聊天室功能的時候遇到一個問題，我用集成包重新安裝了系統環境（比較方便），然后和以前一樣幫虛擬機等都配置好了，進入開發模...

elisa.yang 2019-07-25 13:44 評論0 收藏0
lnmp環境下使用workerman報502 Bad Gateway

摘要：今天使用做聊天室功能的時候遇到一個問題，我用集成包重新安裝了系統環境比較方便，然后和以前一樣幫虛擬機等都配置好了，進入開發模式，可是當我啟動以后，去訪問聊天室報網關錯誤這我頭大了，以前用好好的，這次怎么遇到問題了，不過沒關系我們來檢查下因為今天使用workerman做聊天室功能的時候遇到一個問題，我用集成包重新安裝了系統環境（比較方便），然后和以前一樣幫虛擬機等都配置好了，進入開發模...

Pluser 2019-06-27 14:02 評論0 收藏0
基于 vue-cli 的前端項目的自動發布預覽環境

摘要：就是在提測前部署一個預覽環境，在提測前，每個人本地驗證一遍，再放在預覽環境驗證一遍。于是就準備啪啪啪擼一個完成自動發布預覽環境的工具。用來直接把已經好的文件發布到預覽環境。這樣以后組里的其他同事也都可以用一行命令自己部署預覽環境了。場景進入公司一段時間了。流程還是不太讓人省心。就在上個提測版本的質量還是沒法保證，總是或多或少出現一些問題。于是就想到了上家公司的一個做法。就是在提測前...

ctriptech 2019-08-21 18:43 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

lwx12525 2019-08-20 16:35 評論0 收藏0