vue自定义校验方法整理（不定期更新中...）

vue中常常遇到一些需要自定义校验方法的场景，下面整理了我在开发过程中遇到的一些特殊场景，以及这些场景下我的处理方法（这个时不时遇到一个，因此不定期更新中…）

• 金额输入限制场景：在提现页面要求：
  1.最低提现金额为3元，低于3元不可提现，按钮置灰切不可点击；
  2.输入必须是数字，输入非数字时，按钮设置灰色切不可点击，输入改为正常数字则，按钮变亮可点击；
  3.输入超出可提现额度时，按钮置灰，不可点击
  关键代码如下：

<-- 页面结构 -->
<div class="input-text">
    <input type="tel" v-model="withdraw_amount" style="font-size: 16px;color: #000;" />
</div>
<-- cashNumber为可提现金额 -->
<transition name="fade" v-if="(cashNumber>3||cashNumber==3)&&canclick">
    <div class="page-bottom-btn" v-if="load" style="transition-delay: 0.1s;"  >
        <a class="g-btn btn-blue" @click="submit :key="1">确定提现</a> 
    </div>
</transition>
<transition name="fade" v-else>
  <div class="page-bottom-btn" v-if="load" style="transition-delay: 0.1s;"  >
      <p class="g-btn" style="background: #ccc;color:#fff" :key="2">确定提现</p> 
  </div>
</transition>

//以下为JS关键代码
data: {
     pageData: {},
     cashNumber: "0",
     withdraw_amount:0,
     canclick:true,
},
methods: {
    //请求数据时this.cashNumber = res.ret.balance;this.withdraw_amount=_this.cashNumber-0;
    isRealNum:function (val){
        // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
        if(val === "" || val ==null){
            return false;
        }
        if(!isNaN(val)){
            return true;
        }else{
            return false;
        }
    }, 
    submit:function (val){
        this.withdraw_amount=Math.round(this.withdraw_amount*100)/100;
        console.log("提现金额为："+this.withdraw_amount);
    }
}，
watch: {
  withdraw_amount:function(){
      var _this=this;
      if(this.isRealNum(this.withdraw_amount)){
            if((_this.cashNumber>3||_this.cashNumber==3)&&(_this.withdraw_amount>3||_this.withdraw_amount==3)){
                _this.canclick=true;
            }else{
                _this.canclick=false;
            }
      }else{
            _this.canclick=false;
      }
      if(this.withdraw_amount>_this.cashNumber-0){
            _this.withdraw_amount=_this.cashNumber;
      }
  },
}

• 校验用户名、身份证号、银行卡号、手机号 规则如下
  1.姓名为2到4个汉字；
  2.输入身份证时不可以输入汉字，输入省份证合法；
  3.输入银行卡到第六位显示开户银行名称、图标、限额等信息；输入银行卡号合法；
  4.输入手机号合法；
  关键代码如下：

<-- 结构 -->
<li>
    <input type="text" name="username" v-model="username" v-on:blur="nameisChinese" placeholder="姓名"  minlength="1" maxlength="4"/>
</li>
<li>
    <input type="text" name="idcard" v-model="idcard" v-on:blur="isIdCardNo" @keyup="checkIdinput" placeholder="身份证号" maxlength="18" />
</li>
<li>
    <input id="loginFooter" type="text" name="bankCard" v-model="bankCard" @keyup="showBanklimit" v-on:blur="CheckBankNo" placeholder="银行卡号" maxlength="19" />
</li>
<li>
    <input type="text" name="phonenum" v-model="phonenum" v-on:blur="checkphone" placeholder="银行预留手机号" maxlength="11"/>
</li>
//以下为关键JS代码
data: {
    tipTxt:"",
    username:"",        //用户名
    idcard:"",          //身份证
    bankCard:"",        //银行卡号
    phonenum:"",        //电话
    nameflag:0,         //属性是否校验通过flag
    idflag:0,
    bankflag:0,
    phoneflag:0,
},
methods: {
    tipBox:function(){
        console.log(this.tipTxt);
        //执行封装的报错弹窗提醒，错误提示文本为this.tipTxt
    },
    //校验用户名输入 输入2-4个汉字
    nameisChinese:function(){
        var this.username=this.username.replace(/(^\s+)|(\s+$)/g, "");
        if(!this.username.match(/^[\u4e00-\u9fa5]{2,4}$/)){
          this.nameflag=0;
          this.tipTxt="用户名请输入2-4个汉字";
          this.tipBox();
        }else{
            this.nameflag=1;
            console.log("用户名符合标准！");
        }
    },
    checkIdinput:function(){
        //控制输入身份证的过程中不可以输入汉字
        var r = /^[^\u4e00-\u9fa5]+$/;
        if(r.test(this.idcard)){
            console.log("1")
        }else{
            console.log("error");
            this.idcard="";
        }
    },
    isIdCardNo:function(num){
        var num=this.idcard;
        var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); 
        var error; 
        var varArray = new Array(); 
        var intValue; 
        var lngProduct = 0; 
        var intCheckDigit; 
        var intStrLen = num.length; 
        var idNumber = num;     
        // initialize 
        if ((intStrLen != 15) && (intStrLen != 18)) { 
            error = "输入身份证号码长度不对！"; 
            // alert(error); 
            // this.tipTxt=error;
            this.tipTxt="输入合法的身份证号！"; //此处不一定要展示错误类型，提示错误即可，下同
            this.tipBox();
            //frmAddUser.txtIDCard.focus(); 
            this.idflag=0;
            return false; 
        }     
        // check and set value 
        for(i=0;i<intStrLen;i++) { 
            varArray[i] = idNumber.charAt(i); 
            if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) { 
                error = "错误的身份证号码！."; 
                // this.tipTxt=error;
                this.tipTxt="输入合法的身份证号！";
                this.tipBox();
                // alert(error); 
                //frmAddUser.txtIDCard.focus(); 
                this.idflag=0;
                return false; 
            } else if (i < 17) { 
                varArray[i] = varArray[i]*factorArr[i]; 
            } 
        } 
        if (intStrLen == 18) { 
            //check date 
            var date8 = idNumber.substring(6,14); 
            if (this.checkDate(date8) == false) { 
                error = "身份证中日期信息不正确！."; 
                this.tipTxt="输入合法的身份证号！";
                this.tipBox();
                // alert(error); 
                this.idflag=0;
                return false; 
            }         
            // calculate the sum of the products 
            for(i=0;i<17;i++) { 
                lngProduct = lngProduct + varArray[i]; 
            }         
            // calculate the check digit 
            intCheckDigit = 12 - lngProduct % 11; 
            switch (intCheckDigit) { 
                case 10: 
                    intCheckDigit = 'X'; 
                    break; 
                case 11: 
                    intCheckDigit = 0; 
                    break; 
                case 12: 
                    intCheckDigit = 1; 
                    break; 
            }         
            // check last digit 
            if (varArray[17].toUpperCase() != intCheckDigit) { 
                //error = "身份证效验位错误!...正确为： " + intCheckDigit + "."; 
                //this.tipTxt=error;
                this.tipTxt="输入合法的身份证号！";
                this.tipBox();
                // alert(error); 
                this.idflag=0;
                return false; 
            } 
        }  
        else{ 
            var date6 = idNumber.substring(6,12); 
            if (this.checkDate(date6) == false) { 
                // alert("身份证日期信息有误！.");
                //this.tipTxt="身份证日期信息有误！."; 
                this.tipTxt="输入合法的身份证号！";
                this.tipBox();
                this.idflag=0;
                return false; 
            } 
        } 
        // alert ("Correct."); 
        this.idflag=1;
        return true; 
    },
    showBanklimit:function(){
        var _this=this;
        var r = /^[0-9]*$/;
        if(r.test(this.bankCard)){
        }else{
            console.log("error");
            this.bankCard="";
        }
        if(this.bankCard.length>=6){
            if(this.bankCard.length==6){
                console.log(_this.bankCard);
                //此处请求接口 输入银行的银行限额信息接口
                //大于等于6位根据接口可以判断出开户行名称、限额等相关信息
                _this.showBankinfo=1;//接口请求成功是展示相应开户行信息
                console.log("this place ok");
            }
        }else{
            this.showBankinfo=0;
        }
    },
    //银行卡号Luhn校验算法
    //luhn校验规则：16位银行卡号（19位通用）: 
    //1.将未带校验位的 15（或18）位卡号从右依次编号 1 到 15（18），位于奇数位号上的数字乘以 2。
    //2.将奇位乘积的个十位全部相加，再加上所有偶数位上的数字。
    //3.将加法和加上校验位能被 10 整除。
    //bankno为银行卡号
    luhnCheck: function(bankno){
         var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位（与luhn进行比较）

         var first15Num=bankno.substr(0,bankno.length-1);//前15或18位
         var newArr=new Array();
         for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
             newArr.push(first15Num.substr(i,1));
         }
         var arrJiShu=new Array();  //奇数位*2的积 <9
         var arrJiShu2=new Array(); //奇数位*2的积 >9

         var arrOuShu=new Array();  //偶数位数组
         for(var j=0;j<newArr.length;j++){
             if((j+1)%2==1){//奇数位
                 if(parseInt(newArr[j])*2<9)
                 arrJiShu.push(parseInt(newArr[j])*2);
                 else
                 arrJiShu2.push(parseInt(newArr[j])*2);
             }
             else //偶数位
             arrOuShu.push(newArr[j]);
         }

         var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
         var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
         for(var h=0;h<arrJiShu2.length;h++){
             jishu_child1.push(parseInt(arrJiShu2[h])%10);
             jishu_child2.push(parseInt(arrJiShu2[h])/10);
         }        

         var sumJiShu=0; //奇数位*2 < 9 的数组之和
         var sumOuShu=0; //偶数位数组之和
         var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
         var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
         var sumTotal=0;
         for(var m=0;m<arrJiShu.length;m++){
             sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
         }

         for(var n=0;n<arrOuShu.length;n++){
             sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
         }

         for(var p=0;p<jishu_child1.length;p++){
             sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
             sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
         }      
         //计算总和
         sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);

         //计算luhn值
         var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;        
         var luhn= 10-k;

         if(lastNum==luhn){
            console.log("银行卡验证通过");
             this.bankflag=1;
             return true;
         }else{
            //console.log("银行卡号必须符合luhn校验");
            this.tipTxt="请输入正确的银行卡号";
            this.tipBox();
            this.bankflag=0;
            return false;
         }        
    },
    //检查银行卡号
    CheckBankNo: function() {
        var _this=this;
        var bankno = bankno.replace(/\s/g,'');
         if(bankno == "") {
            this.tipTxt="请输入正确的银行卡号";
            this.tipBox();
            this.bankflag=0;
            return false;
         }
         if(bankno.length < 16 || bankno.length > 19) {
             this.tipTxt="请输入正确的银行卡号";
             this.tipBox();
             this.bankflag=0;
             return false;
         }
         var num = /^\d*$/;//全数字
         if(!num.exec(bankno)) {
             this.tipTxt="请输入正确的银行卡号";
             this.tipBox();
             this.bankflag=0;
             return false;
         }
         //开头6位
         var strBin = "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
         if(strBin.indexOf(bankno.substring(0, 2)) == -1) {
             //console.log("银行卡号开头6位不符合规范");
             this.tipTxt="请输入正确的银行卡号";
             this.tipBox();
             this.bankflag=0;
             return false;
         }
         //Luhn校验
         if(!this.luhnCheck(bankno)){
             this.tipTxt="请输入正确的银行卡号";
             this.tipBox();
             this.bankflag=0;
             return false;
         }
         this.bankflag=1;
         return true;
    },
    //手机号校验
    checkphone:function(mobile){
        var mobile=this.phonenum;
        if(mobile.length==5){
            //console.log("5位")
        }
        if(mobile.length==0){
            this.tipTxt="手机号码不能为空";
            this.tipBox();
            this.phoneflag=0;
            return false; 
        } 
        if(mobile.length!=11){ 
            this.tipTxt="请输入有效的手机号码";
            this.tipBox();
            this.phoneflag=0;
            return false; 
        } 
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; 
        if(!myreg.test(mobile)){ 
            this.tipTxt="请输入有效的手机号码";
            this.tipBox(); 
            this.phoneflag=0;
            return false; 
        }else{
            this.phoneflag=1;
            console.log('手机号码正确');
        } 
    },
}