1. 需求
工作要求,要对表单的一些内容进行校验,要求
- 验证是否输入的数字
- 验证手机号是否正确
- 验证银行卡号,并自动识别银行名称
2. 实现
2.1 验证数字
export function validNumber(value){
var reg = new RegExp("^[0-9]*$");
if(!reg.test(value)){
// this.$Message.error('请输入数字!')
return false
}
if(!/^[0-9]+$/.test(value)){
// this.$Message.error('请输入数字!')
return false
}
return true
}
2.2 验证手机号
// 验证电话号码
export function validPhone(value){
if(!(/^1[3456789]\d{9}$/.test(value))){
this.$Message.error('请输入正确的手机号!')
return false;
}
return true
}
2.3 验证银行卡
-
为了方便多个页面表单使用,对将银行卡验证 与其他验证 函数进行封装。
-
具体代码分为两部分
-
Validate.js
import { bankCardAttribution} from './BankVaild' // 验证电话号码 export function validPhone(value){ if(!(/^1[3456789]\d{9}$/.test(value))){ this.$Message.error('请输入正确的手机号!') return false; } return true } // 验证银行卡 ,并返回银行卡类型和银行名称 // 6221882600114166800 export function validBankCard(value){ let res = bankCardAttribution(value) console.log(res) if(res === 'error'){ // this.$Message.error('请输入正确的手机号!') return false; }else{ return res } } // 验证数字 export function validNumber(value){ var reg = new RegExp("^[0-9]*$"); if(!reg.test(value)){ // this.$Message.error('请输入数字!') return false } if(!/^[0-9]+$/.test(value)){ // this.$Message.error('请输入数字!') return false } return true }
-
BankVaild.js
代码太多,来这下载 下载链接
3. 使用
- 先导入js文件
import { validBankCard} from "@/common/validate/Validate.js"
- 使用函数
if (validBankCard(value)) { console.log(validBankCard(value)) // callback() } else { console.log(validBankCard(value)) console.log("银行卡错误!") // callback(new Error(' ')) }