element-ui使用的验证库是validator，一个下载量非常大的验证库，非常方便
参考https://www.npmjs.com/package/validator
或参考element-ui form表单验证部分的使用
这里介绍一款vue专用验证库，下载量也很大，叫做vee-validate
下面是全局引用和使用方式
安装：
npm i vee-validate
全局引入，main.js
import { ValidationProvider,localize } from "vee-validate/dist/vee-validate.full";
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';
localize("zh_CN",zh_CN); //表示使用中文提示错误信息
Vue.component("ValidationProvider", ValidationProvider);
使用案例
<el-form-item label="邮箱" >
<ValidationProvider name="Email:"
:rules="{required:true,email:true,max:{length:10}}"
v-slot="{ errors }"
>
<el-input
v-model="form.email"
placeholder="请输入号码"
></el-input>
<span>{{ errors[0] }}</span>
</ValidationProvider>
</el-form-item>
使用ValidationProvider 包裹需要校验的输入项目即可
参考官网[https://logaretm.github.io/vee-validate/](https://logaretm.github.io/vee-validate/)
可翻译成中文阅读
旧版本自定义的用法
首先定义一个本地字段，组件初始化时加载
在要校验的字段上加name属性，name属性值和本地字段值保持一致
在要校验的字段上加入v-validate="{}"字符串对象
在要校验的字段下方加上错误提示语
在需要校验的逻辑里，加入校验方法，只有通过校验才可以继续，例：
<input type="text" v-model="realName" placeholder="请输入姓名" name="realName" v-validate="{required:true,regex:/^[a-zA-
Z\u4e00-\u9fa5]+$/}">
<span class="error-text">{{errors.first('realName')}}</span>
rules() {
const dict = {
custom: {
realName: {
required: "请输入姓名",
regex: "请输入合法的姓名"
}
}
};
this.$validator.localize("en", dict);
}
created() {
this.rules();
}
methods里面需要使用时
toNextStep() {
this.$validator.validate().then(valid => {
if (valid) {
BIN.getBankBin(this.cardId).then(res => {
console.log(res)
}).catch(err => {
Toast("银行卡输入有误或暂不支持，请重新输入");
})
}
});
},
this.$validator.validate().then方法里面
validate()括号里，如果不传参数，就是需要校验全部
validate(“telphone”)传一个字符串，就是校验telphone这一个规则
如果想要校验多个，需这样做
1. 笨方法，嵌套，在每一个通过验证里面去做下面的事
2.
required: "请输入银行卡号",
numeric: "银行卡号只能为数字哦",
min: "卡号至少为16位哦",
max: "卡号最多为19位哦",
regex:自定义正则部分，比如手机号不正确
vee-validate自定义规则，一些字段的固定写法，包括正则
姓名：可以包含汉字和字母
v-validate="{required:true,regex:/^[a-zA-Z\u4e00-\u9fa5]+$/}"
银行卡号：最少16位，最多19位，只能是数字
v-validate="{required:true,numeric:true,min:16,max:19}"
手机号：11位
v-validate="{required:true, regex:/^(1(3|4|5|6|7|8|9)[0-9]\d{8})$/}"
身份证号：15位或18位数字，或17位数字+字母
v-validate="{required:true,regex:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,alpha_num:true,max:18}"
只可输入数字：/[^\d]/g
表单里面可以配合maxlength来使用，效果更好。
vue校验数据的写法
<el-input v-model='applyNum' @input="applyNumInput"></el-input>
applyNumInput () {
let reg = /[^\d]/g //只能输入数字正则
this.applyNum = this.applyNum.replace(reg, '')
}
