vue表单验证--银行卡验证
一、表单验证可以通过阿里的支付宝接口进行校验,能够准确识别是否存在,归属行:https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=1111&cardBinCheck=true//接口api:需要传入的2个参数,卡号cardNo和cardBinCheck效果:二、使用步骤(1)<el-form-item labe
·
一、表单验证可以通过阿里的支付宝接口进行校验,能够准确识别是否存在,归属行:
https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=1111&cardBinCheck=true
//接口api:需要传入的2个参数,卡号cardNo和cardBinCheck
所属行bank ,是否正确有效validated 类型cardType 还有状态stat
效果:
二、使用步骤
(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);
});
更多推荐
已为社区贡献1条内容
所有评论(0)