微信小程序中使用有赞的Vant Weapp库校验身份证、手机号、银行卡号等

最新推荐文章于 2025-09-30 09:16:35 发布

原创

最新推荐文章于 2025-09-30 09:16:35 发布 · 1w 阅读

31 ·

CC 4.0 BY-SA版权

本文介绍了在微信小程序中使用有赞的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 =

最低0.47元/天解锁文章