1.

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

2.

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

van-fieldrequiredclearablevalue"{{xxx}}"type"bankCard"name"acc_name"label"姓名"placeholder"请输入xxx"error-message"{{nameMessage}}"border"{{false}}"bind:change"nameChange"disabled/3.

一、银行卡号

bankCardChange:function(event){constnoevent.detail||event;letmessage'';letdisable'';if(no.length16||no.length19){//银行卡号长度在16到19之间if(no.length0){message'您输入的银行卡号不能为空';disabletrue}else{message'您输入的银行卡号长度有误';disabletrue}}varnum/^d*$/;//全数字if(!num.exec(no)){//银行卡号必须全为数字;message'输入的银行卡号必须全为数字';disabletrue}//开头6位varstrBin"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位不符合规范';disabletrue}varlastNumno.substr(no.length-1,1);//取出最后一位（与luhm进行比较）varfirst15Numno.substr(0,no.length-1);//前15或18位varnewArrnewArray();for(varifirst15Num.length-1;i-1;i--){//前15或18位倒序存进数组newArr.push(first15Num.substr(i,1));}vararrJiShunewArray();//奇数位*2的积9vararrJiShu2newArray();//奇数位*2的积9vararrOuShunewArray();//偶数位数组for(varj0;jnewArr.length;j++){if((j+1)%21){//奇数位if(parseInt(newArr[j])*29)arrJiShu.push(parseInt(newArr[j])*2);elsearrJiShu2.push(parseInt(newArr[j])*2);}else//偶数位arrOuShu.push(newArr[j]);}varjishu_child1newArray();//奇数位*29的分割之后的数组个位数varjishu_child2newArray();//奇数位*29的分割之后的数组十位数for(varh0;harrJiShu2.length;h++){jishu_child1.push(parseInt(arrJiShu2[h])%10);jishu_child2.push(parseInt(arrJiShu2[h])/10);}varsumJiShu0;//奇数位*29的数组之和varsumOuShu0;//偶数位数组之和varsumJiShuChild10;//奇数位*29的分割之后的数组个位数之和varsumJiShuChild20;//奇数位*29的分割之后的数组十位数之和varsumTotal0;for(varm0;marrJiShu.length;m++){sumJiShusumJiShu+parseInt(arrJiShu[m]);}for(varn0;narrOuShu.length;n++){sumOuShusumOuShu+parseInt(arrOuShu[n]);}for(varp0;pjishu_child1.length;p++){sumJiShuChild1sumJiShuChild1+parseInt(jishu_child1[p]);sumJiShuChild2sumJiShuChild2+parseInt(jishu_child2[p]);}//计算总和sumTotalparseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);//计算Luhm值varkparseInt(sumTotal)%100?10:parseInt(sumTotal)%10;varluhm10-k;if(lastNumluhm){message'';disablefalse}else{message'您输入的银行卡号有误';disabletrue}this.setData({bandMessage:message,disabled:disable,acc_no:no});if(this.data.disabledtrue){returnfalse;}else{returntrue;}},4.

二、手机号

telChange:function(event){constphoneevent.detail||event;letmessage'';letdisable'';if(phone){if(/^1(3|4|5|7|8)d{9}$/.test(phone)){message'';disablefalse;}else{message'您输入的手机号码有误';disabletrue;}}else{message'输入的手机号不能为空',disabletrue}this.setData({telMessage:message,disabled:disable,txn_tel:phone});if(this.data.disabledtrue){returnfalse;}else{returntrue;}},5.

三、姓名

nameChange:function(event){constnameevent.detail||event;letmessage'';letdisable'';if(name){if(/^[u4e00-u9fa5]{2,6}$/.test(name)){message'';disablefalse;}else{message'您输入的姓名有误';disabletrue;}}else{message'输入的姓名不能为空',disabletrue}this.setData({nameMessage:message,disabled:disable,acc_name:name});if(this.data.disabledtrue){returnfalse;}else{returntrue;}},6.

四、身份证号

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

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

8.

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