vant 绑定银行卡页面+验证所属银行+身份证号码+所属银行选择器

<template><div><van-nav-bar  class="navBar" style="background-color: white" title="绑定银行卡"  @border="false"><template #left  ><van-icon name="arrow-left" class="navBarLeft"  size="18" @click="onClickLeft" /></template></van-nav-bar><van-col v-show="oneShow" span="24"><van-fieldv-model="name"label="持卡人姓名"placeholder="持卡人姓名":error-message="nameChange"clearable/><van-fieldv-model="idCard"label="身份证号码"placeholder="身份证号码":error-message="idCardChange"clearable/><div style="width: 100%;height: 0.1rem;background-color: #6e6e6e"></div><van-fieldreadonlyclickablename="picker":value="value"label="所属银行"placeholder="点击选择银行"@click="showPicker = true"/><van-popup v-model="showPicker" position="bottom"><van-pickershow-toolbar:columns="bankList"@confirm="onConfirm"@cancel="showPicker = false"/></van-popup><van-fieldv-model="bankNo"label="银行卡号"placeholder="银行卡号":error-message="bankNoChange"clearable/><van-fieldv-model="tel"label="手机号码"placeholder="手机号码":error-message="telChange"clearable/><div style="margin-top: 0.2rem;padding: 0.2rem"><van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(1)">下一步</van-button></div></van-col><van-col v-show="twoShow" span="24"><van-fieldv-model="tel"placeholder="手机号码":error-message="telChange"clearable/><van-fieldv-model="code"placeholder="验证码":error-message="codeChange"clearable/><div style="margin-top: 0.2rem;padding: 0.2rem"><van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(2)">下一步</van-button></div></van-col><van-col v-show="threeShow" span="24"><div style="margin-top: 0.2rem;padding: 0.2rem"><van-button type="primary" :round="true" :loading="loading" loading-text="提交中..." size="large" :disabled="zhud" @click="login(3)">返回</van-button></div></van-col></div>
</template><script>import axios from "axios";import {post} from "../util/http";export default {name: "AddBank",data(){return {name:"",idCard:'',tel:'',code:'',bankNo:'',bankId:'',zhud:false,loading:false,oneShow:true,twoShow:false,threeShow:false,showPicker: false,value: '',bankList: [],}},computed:{nameChange () {if(this.name) {if (/^[\u4e00-\u9fa5]{2,6}$/.test(this.name)){return ''} else {return '您输入的姓名有误'}} else {return '输入的姓名不能为空'}},idCardChange () {if ( this.idCard.length == 15) {if (this.isValidityBrithBy15IdCard(this.idCard)){return ''} else {return'您输入的身份证有误'}} else if ( this.idCard.length == 18) {var a_idCard =  this.idCard.split(""); // 得到身份证数组if (this.isValidityBrithBy18IdCard(this.idCard) && this.isTrueValidateCodeBy18IdCard(a_idCard)) { //进行18位身份证的基本验证和第18位的验证return ''} else {return '您输入的身份证有误'}} else {if (this.idCard.length === 0) {return '输入的身份证号不能为空'} else {return '您输入的身份证长度有误'}}},bankNoChange () {if(this.bankNo) {if (/^\d*$/.test(this.bankNo)){if(this.bankNo.length<16){return '您输入的银行卡号长度有误'}else {return ''}} else {return '您输入的银行卡号有误'}} else {return '输入的银行卡号不能为空'}},telChange () {if(this.tel) {if (/^\d*$/.test(this.tel)){return ''} else {return '您输入的手机号码有误'}} else {return '输入的手机不能为空'}},codeChange () {if(this.code) {if (/^\d*$/.test(this.code)){return ''} else {return '您输入的验证码有误'}} else {return '输入的验证码不能为空'}},},mounted() {this.getBankList()},methods:{onClickLeft() {if (window.history.length <= 1) {this.$router.push({path:'/'})return false} else {this.$router.go(-1)}},//15位身份证isValidityBrithBy15IdCard(idCard15) {var year = idCard15.substring(6, 8);var month = idCard15.substring(8, 10);var day = idCard15.substring(10, 12);var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法if(temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {return false;} else {return true;}},//18位生日校验isValidityBrithBy18IdCard(idCard18) {var year = idCard18.substring(6, 10);var month = idCard18.substring(10, 12);var day = idCard18.substring(12, 14);var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));// 这里用getFullYear()获取年份，避免千年虫问题if(temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {return false;} else {return true;}},//18位最后一位校验isTrueValidateCodeBy18IdCard(a_idCard) {var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证验证位值.10代表Xvar sum = 0; // 声明加权求和变量if(a_idCard[17].toLowerCase() == 'x') {a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作}for (var i = 0; i < 17; i++) {sum += Wi[i] * a_idCard[i]; // 加权求和}var valCodePosition = sum % 11; // 得到验证码所位置if (a_idCard[17] == ValideCode[valCodePosition]) {return true;} else {return false;}},login (value) {console.log(value)if(value == 1){if (this.tel === '' || this.usertel === '手机号码格式错误') {this.$toast('手机号码输入有误')return}if (this.bankId === '') {this.$toast('所属银行不能为空')return}this.oneShow = falsethis.twoShow = truethis.threeShow = false}else if(value == 2 ){this.oneShow = falsethis.twoShow = falsethis.threeShow = true}else{this.$router.push({path:'/'})}//  this.reallR()},reallR () {this.zhud=truethis.loading=truevar post_data={tel: this.tel,password: this.password}axios.post(this.globalAPI.setLogin, post_data).then(res=>{// console.log(res)this.zhud=falsethis.loading=falseif (res.data.status  === 200) { this.$toast(res.data.info)this.userToken = 'Bearer ' + res.data.token;// 将用户token保存到vuex中this.changeLogin({ Authorization: this.userToken });// localStorage.setItem('token',res.data.token) //登录标识if (window.history.length <= 1) {this.$router.push({path:'/'})return false} else {this.$router.go(-1)}}  else {this.$toast(res.data.info)}})},onConfirm(value) {console.log(value)this.value = value.text;this.bankId = value.keyIdthis.showPicker = false;},getBankList(){let postData={};//localStorage.clear()  //清除所有localStorage// 获取轮播图post({ //函数内部调用函数 传参为对象形式url: this.globalAPI.getBankList,          //请求地址data: postData,                     //请求数据IS: false                              //是否需要弹框提示}).then(res => {// console.log(res.data.data)let list = [];for (var i=0;i<res.data.data.length;i++){var index ={"keyId":res.data.data[i].id,"text":res.data.data[i].name}list.push(index)}// console.log(list)this.bankList = list;        //处理业务逻辑........});},}}
</script><style scoped></style>

vant 绑定银行卡页面+验证所属银行+身份证号码+所属银行选择器相关推荐

银行卡四元素校验API 验证姓名手机号码身份证号码银行卡号是否一致
银行卡四元素校验API,检测输入的姓名.手机号码.身份证号码.银行卡号是否一致.通过https://www.juhe.cn/docs/api/id/213申请APPKEY 1.银行卡四元素检测接口地 ...
Javascript验证表单身份证号码的合法性
文章出处: http://dengo.org/archives/941 不少大的游戏注册时都要输入身份证号码,来限制未成年人,配合所谓的反沉迷系统,账号注册环节注重的是快捷,所以身份证验证都不是真实的 ...
正则表达式验证手机号码、身份证号码、邮箱、统一社会信用代码/营业执照号
1. 验证手机号码 /^1[3456789]\d{9}$/ 2. 验证身份证号码 /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[ ...
input输入框验证邮箱、身份证号码、手机号码、密码等正则
1.邮箱 /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/该正则表达式的详细解释如下:^:以句首开始匹配 [\w-]+:匹配一个或多个字母.数字.下划线或连 ...
比较严谨的java验证18位身份证号码
/** * 我国公民的身份证号码特点如下* 1.长度18位* 2.第1-17号只能为数字* 3.第18位只能是数字或者x* 4.第7-14位表示特有人的年月日信息* 请实现身份证号码合法性判断的函数, ...
前端JS校验银行卡卡号和身份证号码（附ES6版方法）
1.银行卡卡号校验方法. function luhnCheck(bankno) { var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一 ...
php微信绑定银行卡号,《微信》免输卡号绑定银行卡方法介绍
在当我们使用<微信>绑定银行卡的时候,是不是都感觉输入银行卡号非常的麻烦呢?而现在,<微信>已经宣布今后绑定银行卡不需要输入复杂的卡号了.那么大家知道这一个梗的真实意思吗?接下 ...
15位或18位长度身份证号码JS验证
免责声明:身份证号为随机组合而成,不会涉及任何隐私泄密问题,也非现实生活中真实的身份证号码:身份证号码所属年龄均为18岁以上,均已通过校验. var IdNum1 = "3205831986 ...
mysql验证身份证号正确_通过SQL校验身份证号码是否正确
根据提供的身份证号码信息验证身份证号码是否符合二代身份证规范,其中区域编码网上可下载. 使用数据库为DB2,但目测可以通用身份证号码第18位验证算法从网上查得,具体验证算法如下: 1.将前面的身份证号 ...

vant 绑定银行卡页面+验证所属银行+身份证号码+所属银行选择器

vant 绑定银行卡页面+验证所属银行+身份证号码+所属银行选择器相关推荐

最新文章

热门文章