vue+element实现银行卡号只输入数字，四个补一个空位，并实现校验

html 输入框只输入数字

// type设置为text
<el-form-item label="卡号" prop="bankNumber">
     <el-input v-model="form.bankNumber" placeholder="请输入银行卡号" type="text" />
</el-form-item>

watch 监听实现四个数字补一个空位

  ['form.bankNumber'](val) {
        if (val != undefined) {
          this.$nextTick(() => {
            this.form.bankNumber = val.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');
          });
        }
      }

自定义卡号校验规则

data() {
      var bankAccountValid = (rule, value, callback) => {
        const 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 (!value) {
          return
        } else if (value.trim().length < 12 || value.trim().length > 19) {
          callback(new Error('银行卡号长度必须在12到19之间'))
        } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
          callback(new Error('银行卡号开头6位不符合规范'))
        } else {
          callback()
        }
      };
      return {
        // 表单校验
        rules: {
          bankNumber: [
            {
              required: false, trigger: 'blur', validator: bankAccountValid
            }
          ]
        },
      };
    },