element-ui使用的驗(yàn)證庫(kù)是validator事镣，一個(gè)下載量非常大的驗(yàn)證庫(kù)或南，非常方便
參考https://www.npmjs.com/package/validator
或參考element-ui form表單驗(yàn)證部分的使用
這里介紹一款vue專用驗(yàn)證庫(kù)驳规，下載量也很大肴敛，叫做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); //表示使用中文提示錯(cuò)誤信息
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="請(qǐng)輸入號(hào)碼"
></el-input>
<span>{{ errors[0] }}</span>
</ValidationProvider>
</el-form-item>
使用ValidationProvider 包裹需要校驗(yàn)的輸入項(xiàng)目即可
參考官網(wǎng)[https://logaretm.github.io/vee-validate/](https://logaretm.github.io/vee-validate/)
可翻譯成中文閱讀
舊版本自定義的用法
首先定義一個(gè)本地字段吗购，組件初始化時(shí)加載
在要校驗(yàn)的字段上加name屬性医男，name屬性值和本地字段值保持一致
在要校驗(yàn)的字段上加入v-validate="{}"字符串對(duì)象
在要校驗(yàn)的字段下方加上錯(cuò)誤提示語(yǔ)
在需要校驗(yàn)的邏輯里，加入校驗(yàn)方法捻勉，只有通過(guò)校驗(yàn)才可以繼續(xù)镀梭，例：
<input type="text" v-model="realName" placeholder="請(qǐng)輸入姓名" 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: "請(qǐng)輸入姓名",
regex: "請(qǐng)輸入合法的姓名"
}
}
};
this.$validator.localize("en", dict);
}
created() {
this.rules();
}
methods里面需要使用時(shí)
toNextStep() {
this.$validator.validate().then(valid => {
if (valid) {
BIN.getBankBin(this.cardId).then(res => {
console.log(res)
}).catch(err => {
Toast("銀行卡輸入有誤或暫不支持，請(qǐng)重新輸入");
})
}
});
},
this.$validator.validate().then方法里面
validate()括號(hào)里踱启，如果不傳參數(shù)报账，就是需要校驗(yàn)全部
validate(“telphone”)傳一個(gè)字符串研底，就是校驗(yàn)telphone這一個(gè)規(guī)則
如果想要校驗(yàn)多個(gè)，需這樣做
1. 笨方法笙什，嵌套飘哨，在每一個(gè)通過(guò)驗(yàn)證里面去做下面的事
2.
required: "請(qǐng)輸入銀行卡號(hào)",
numeric: "銀行卡號(hào)只能為數(shù)字哦",
min: "卡號(hào)至少為16位哦",
max: "卡號(hào)最多為19位哦",
regex:自定義正則部分，比如手機(jī)號(hào)不正確
vee-validate自定義規(guī)則琐凭，一些字段的固定寫法芽隆，包括正則
姓名：可以包含漢字和字母
v-validate="{required:true,regex:/^[a-zA-Z\u4e00-\u9fa5]+$/}"
銀行卡號(hào)：最少16位，最多19位统屈，只能是數(shù)字
v-validate="{required:true,numeric:true,min:16,max:19}"
手機(jī)號(hào)：11位
v-validate="{required:true, regex:/^(1(3|4|5|6|7|8|9)[0-9]\d{8})$/}"
身份證號(hào)：15位或18位數(shù)字胚吁，或17位數(shù)字+字母
v-validate="{required:true,regex:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,alpha_num:true,max:18}"
只可輸入數(shù)字：/[^\d]/g
表單里面可以配合maxlength來(lái)使用，效果更好愁憔。
vue校驗(yàn)數(shù)據(jù)的寫法
<el-input v-model='applyNum' @input="applyNumInput"></el-input>
applyNumInput () {
let reg = /[^\d]/g //只能輸入數(shù)字正則
this.applyNum = this.applyNum.replace(reg, '')
}
