微信小程序中使用有赞的VantWeapp库校验身份证、手机号、银行卡号等-即速应用

在input输入框中我使用了bind:change事件监听值变化，实现实时校验

.wxml文件中其中一个代码块

<van-field    required    clearable    value="{{xxx}}"    type="bankCard"    name="acc_name"    label="姓名"    placeholder="请输入xxx"    error-message="{{nameMessage}}"    border="{{false}}"    bind:change="nameChange"    disabled  />

一、银行卡号

bankCardChange: function(event){    const no = event.detail || event;    let message = '';    let disable = '';    if (no.length < 16 || no.length > 19) {      //银行卡号长度在16到19之间      if (no.length === 0){          message = '您输入的银行卡号不能为空';          disable = true      } else {        message = '您输入的银行卡号长度有误';        disable = true      }    }    var num = /^d*$/; //全数字    if (!num.exec(no)) {      //银行卡号必须全为数字;        message = '输入的银行卡号必须全为数字';        disable = true    }    //开头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(no.substring(0, 2)) == -1) {//银行卡号开头6位不符合规范        message = '您输入的银行卡号开头6位不符合规范';        disable = true    }    var lastNum = no.substr(no.length - 1, 1); //取出最后一位（与luhm进行比较）    var first15Num = no.substr(0, no.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);    //计算Luhm值    var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;    var luhm = 10 - k;    if (lastNum == luhm) {        message = '';        disable = false    } else {        message = '您输入的银行卡号有误';        disable = true    }    this.setData({      bandMessage: message,      disabled: disable,      acc_no: no    });    if (this.data.disabled === true) {      return false;    }else {      return true;    }  },

二、手机号

telChange: function (event) {    const phone = event.detail || event;    let message = '';    let disable = '';    if (phone) {      if (/^1(3|4|5|7|8)d{9}$/.test(phone)) {        message = '';        disable = false;      } else {        message = '您输入的手机号码有误';        disable = true;      }    } else {      message = '输入的手机号不能为空',      disable = true    }    this.setData({      telMessage: message,      disabled: disable,      txn_tel: phone    });    if (this.data.disabled === true) {      return false;    }else {      return true;    }  },

三、姓名

nameChange: function (event) {    const name = event.detail || event;    let message = '';    let disable = '';    if(name) {      if (/^[u4e00-u9fa5]{2,6}$/.test(name)){        message = '';        disable = false;      } else {        message = '您输入的姓名有误';        disable = true;      }    } else {      message = '输入的姓名不能为空',        disable = true    }    this.setData({      nameMessage: message,      disabled: disable,      acc_name: name    });    if (this.data.disabled === true) {      return false;    }else {      return true;    }  },

四、身份证号

idCardChange: function (event) {    const idCard = event.detail || event;    let message = '';    let disable = false;    if (idCard.length == 15) {      if (this.isValidityBrithBy15IdCard(idCard)){        message = '';        disable = false;      } else {        message = '您输入的身份证有误';        disable = true;      }    } else if (idCard.length == 18) {      var a_idCard = idCard.split(""); // 得到身份证数组      if (this.isValidityBrithBy18IdCard(idCard) && this.isTrueValidateCodeBy18IdCard(a_idCard)) { //进行18位身份证的基本验证和第18位的验证        message = '';        disable = false;      } else {        message = '您输入的身份证有误';        disable = true;      }    } else {      if (idCard.length === 0) {        message = '输入的身份证号不能为空';        disable = true;      } else {        message = '您输入的身份证长度有误';        disable = true;      }    }    this.setData({      idMessage: message,      disabled: disable,      cert_no: idCard    });    if (this.data.disabled === true) {      return false;    }else {      return true;    }  },   //15位身份证  isValidityBrithBy15IdCard: function(idCard15) {    var year = idCard15.substring(6, 8);    var month = idCard15.substring(8, 10);    var day = idCard15.substring(10, 12);    var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));    // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法    if(temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {      return false;    } else {        return true;    }  },  //18位生日校验  isValidityBrithBy18IdCard: function(idCard18) {    var year = idCard18.substring(6, 10);    var month = idCard18.substring(10, 12);    var day = idCard18.substring(12, 14);    var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));    // 这里用getFullYear()获取年份，避免千年虫问题    if(temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {      return false;    } else {      return true;    }  },  //18位最后一位校验  isTrueValidateCodeBy18IdCard: function (a_idCard) {    var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子    var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证验证位值.10代表X    var sum = 0; // 声明加权求和变量    if(a_idCard[17].toLowerCase() == 'x') {      a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作    }    for (var i = 0; i < 17; i++) {      sum += Wi[i] * a_idCard[i]; // 加权求和    }    var valCodePosition = sum % 11; // 得到验证码所位置    if (a_idCard[17] == ValideCode[valCodePosition]) {      return true;    } else {      return false;    }  },

在每一个校验后我加了一个判断disabled的值，返回true还是false，是为了解决这样一个bug：假如用户在银行卡号输入错误的值，而又在其他的输入框正确，这个时候按钮并不是处于禁用状态，所以在点击按钮时获取到所有输入框的值，再调用校验规则函数，如果都是true，那么可以进行你想要的操作，那么如果返回的有一个是false，就不能发送请求给后台，直接给用户一个温馨提示。感觉这样真的是很麻烦，希望在接下来的某一天，有赞也会有直接校验的框架供大家使用。

本文章代码参考https://developers.weixin.qq.com/community/develop/doc/0006e4acf6c94065e6a69cc7351806，并加以修改