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

本文介绍了在微信小程序中使用有赞的Vant Weapp库进行身份证、手机号和银行卡号的实时校验。通过bind:change事件监听输入值变化,结合WXML代码示例,展示了如何在输入错误时禁用提交按钮,以及如何在所有输入通过校验后执行操作。文章还讨论了当前方法的繁琐性,期待有更便捷的校验框架出现。
摘要由CSDN通过智能技术生成

在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 
  • 4
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值