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

最新推荐文章于 2024-08-31 18:12:53 发布

huang_jimei

最新推荐文章于 2024-08-31 18:12:53 发布

阅读量3.1k

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/huang_jimei/article/details/115394185

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用阿里的支付宝接口进行银行账号的校验，包括接口调用的URL、所需参数以及在前端页面中实现校验的步骤。通过在表单组件中设置规则，并结合axios进行接口调用来验证银行账号的正确性和有效性。

摘要由CSDN通过智能技术生成

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

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);
    });