一、表单验证可以通过阿里的支付宝接口进行校验,能够准确识别是否存在,归属行:https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=1111cardBinCheck=true//接口api:需要传入的2个参数,卡号car...

一、表单验证可以通过阿里的支付宝接口进行校验,能够准确识别是否存在,归属行:
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);
});
织梦狗教程
本文标题为:vue表单验证--银行卡验证


基础教程推荐
猜你喜欢
- JavaScript垃圾回收机制(引用计数,标记清除,性能优 2022-08-31
- 在IE中为abbr标签加样式 2022-10-16
- ajax实现数据分页查询 2023-01-31
- 纯javascript的ajax实现php异步提交表单的简单实例 2022-12-28
- 关于ajax异步访问数据的问题 2023-02-23
- 解决:layUI数据表格+简单查询 2022-12-16
- Unicode中的常用字母小结 2022-09-21
- AJax 把拿到的后台数据在页面中渲染的实例 2023-02-22
- 原生ajax瀑布流demo分享(必看篇) 2023-02-01
- Ajax提交表单并接收json实例代码 2023-02-13