成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一度讓我頭大到起飛的表單驗(yàn)證

raise_yang / 1430人閱讀

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

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

step1： 首先定義一個(gè)Validator表單驗(yàn)證對(duì)象 
var Validator = {
    isNoEmpty: function(){}, // 判斷是否為空
    maxlength: function(){}, //最大長(zhǎng)度限制
    isID: function(){}, // 身份證號(hào)碼校驗(yàn)
    isMobile: function(){}, // 手機(jī)號(hào)校驗(yàn)
    isChineseName: function(){}, //中文名校驗(yàn)
    onlyNum: function(){}, // 只能輸入兩位小數(shù)
    
};
step2： 在對(duì)應(yīng)的HTML頁(yè)面中使用時(shí)，只需要?jiǎng)?chuàng)建這個(gè)實(shí)例對(duì)象，調(diào)用對(duì)應(yīng)的方法即可，如下： 
 var validator = Object.create(Validator);
 var isMobile = validator.isMobile(mobile, mobile.val(), "請(qǐng)輸入正確的手機(jī)號(hào)碼");
 var isID = validator.isID(ID, ID.val(), "請(qǐng)輸入正確的身份證號(hào)碼");
step3： 補(bǔ)充Validator對(duì)象中的每個(gè)校驗(yàn)方法
1. 判斷是否為空

三個(gè)參數(shù)：
element：當(dāng)前的DOM節(jié)點(diǎn)
value： 當(dāng)前表單中的值
errMsg： 錯(cuò)誤提示信息

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

四個(gè)參數(shù)：
element：當(dāng)前的DOM節(jié)點(diǎn)
value： 當(dāng)前表單中的值
errMsg： 錯(cuò)誤提示信息
length：最大長(zhǎng)度值

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

三個(gè)參數(shù)：
element：當(dāng)前的DOM節(jié)點(diǎn)
value： 當(dāng)前表單中的值
errMsg： 錯(cuò)誤提示信息

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.手機(jī)號(hào)校驗(yàn)

三個(gè)參數(shù)：
element：當(dāng)前的DOM節(jié)點(diǎn)
value： 當(dāng)前表單中的值
errMsg： 錯(cuò)誤提示信息

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

三個(gè)參數(shù)：
element：當(dāng)前的DOM節(jié)點(diǎn)
value： 當(dāng)前表單中的值
errMsg： 錯(cuò)誤提示信息

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

一個(gè)參數(shù)：
value：當(dāng)前文本框的值
tips：在調(diào)用時(shí)可傳入this.value,即this.value = validator.onlyNum(this.value)
這樣就能保證你修改的就是當(dāng)前文本框?qū)ο蟮闹?，因?yàn)閷?duì)象屬于引用類型，如果沒有深拷貝，則會(huì)修改它本身。

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

強(qiáng)制數(shù)字保留兩位小數(shù)時(shí)，使用toFixed(); 即 var num = parseFloat(num).toFixed()

繼續(xù)更新中……

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95617.html

相關(guān)文章

  • lnmp環(huán)境下使用workerman報(bào)502 Bad Gateway

    摘要：今天使用做聊天室功能的時(shí)候遇到一個(gè)問題，我用集成包重新安裝了系統(tǒng)環(huán)境比較方便，然后和以前一樣幫虛擬機(jī)等都配置好了，進(jìn)入開發(fā)模式，可是當(dāng)我啟動(dòng)以后，去訪問聊天室報(bào)網(wǎng)關(guān)錯(cuò)誤這我頭大了，以前用好好的，這次怎么遇到問題了，不過沒關(guān)系我們來檢查下因?yàn)? 今天使用workerman做聊天室功能的時(shí)候遇到一個(gè)問題，我用集成包重新安裝了系統(tǒng)環(huán)境（比較方便），然后和以前一樣幫虛擬機(jī)等都配置好了，進(jìn)入開發(fā)模...

    elisa.yang 評(píng)論0 收藏0

  • lnmp環(huán)境下使用workerman報(bào)502 Bad Gateway

    摘要：今天使用做聊天室功能的時(shí)候遇到一個(gè)問題，我用集成包重新安裝了系統(tǒng)環(huán)境比較方便，然后和以前一樣幫虛擬機(jī)等都配置好了，進(jìn)入開發(fā)模式，可是當(dāng)我啟動(dòng)以后，去訪問聊天室報(bào)網(wǎng)關(guān)錯(cuò)誤這我頭大了，以前用好好的，這次怎么遇到問題了，不過沒關(guān)系我們來檢查下因?yàn)? 今天使用workerman做聊天室功能的時(shí)候遇到一個(gè)問題，我用集成包重新安裝了系統(tǒng)環(huán)境（比較方便），然后和以前一樣幫虛擬機(jī)等都配置好了，進(jìn)入開發(fā)模...

    Pluser 評(píng)論0 收藏0

  • 基于 vue-cli 的前端項(xiàng)目的自動(dòng)發(fā)布預(yù)覽環(huán)境

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

    ctriptech 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    you_De 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    lwx12525 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<