vue表单验证--银行卡验证

一、表单验证可以通过阿里的支付宝接口进行校验,能够准确识别是否存在,归属行:

https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=1111&cardBinCheck=true
//接口api:需要传入的2个参数,卡号cardNo和cardBinCheck

所属行bank ,是否正确有效validated 类型cardType 还有状态stat

效果:
vue表单验证--银行卡验证
二、使用步骤
(1)组件部分

<el-form-item label="银 行 账 号:" prop="bank_account"><el-input v-model="form.bank_account" clearable></el-input></el-form-item>

(2)rulles规则部分

rules: {
bank_account: [{ required: true, message: '请输入银行账号', trigger: 'blur' }, { validator: bankche, trigger: 'blur' }],

}

(3)验证validate

data() {
     var bankche = (rule, value, callback) => {
        if (!this.cardno) {
             callback(new Error('银行卡号不正确'));
        } else {
             callback();
        }
     }
}

(4)接口验证

//验证银行卡号
   console.log(this.form.bank_account);
   var accound='https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo='+this.form.bank_account+'&cardBinCheck=true'
   axios
    .get(accound)
    .then(response => (this.cardno = response.data.validated,console.log(response.data.validated),console.log('sdf',this.cardno)))
    .catch(function(error) {
     // 请求失败处理
     console.log(error);
    });
上一篇:Java设计模式---责任链模式


下一篇:Serializer自定义序列化