本文介绍了在微信小程序中使用有赞的Vant Weapp库进行身份证、手机号和银行卡号的实时校验。通过bind:change事件监听输入值变化，结合WXML代码示例，展示了如何在输入错误时禁用提交按钮，以及如何在所有输入通过校验后执行操作。文章还讨论了当前方法的繁琐性，期待有更便捷的校验框架出现。
在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，并加以修改
扫一扫
到【灌水乐园】发言
