溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下Vue Element-ui表單校驗規(guī)則怎么實現(xiàn)的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
??Element-ui表單校驗規(guī)則，使得錯誤提示可以直接在form-item下面顯示，無需彈出框，因此還是很好用的。
??我在做了登錄頁面的表單校驗后，一度以為我已經(jīng)很了解表單的校驗規(guī)則。但我在深入使用表單校驗規(guī)則時，遇到下列問題：
如何判斷屬性值是否在某個范圍內(nèi)，且這個范圍可以任意指定？
如何判斷屬性值是否為某個值？
多個屬性聯(lián)合校驗，當(dāng)前屬性的校驗規(guī)則依賴于另一個屬性的值，如何進(jìn)行校驗？如注冊頁面，ID類型有郵箱地址、手機號和身份證號碼，選擇不同類型，IDValue屬性的校驗規(guī)則是不同，如何處理？
兩種模式，進(jìn)入同一個表單組件，某些欄位可以不使用校驗規(guī)則，即rules的對象會有所不同。這種情況如何處理？
??作為規(guī)則校驗的入門，以登錄頁面為例，代碼如下：
<template>
<div class="login-container">
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
<h2 class="login-title">XX管理系統(tǒng)登錄</h2>
<el-form-item label="用戶名：" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密 碼：" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item label="驗證碼：" prop="verifyCode">
<el-input v-model="form.verifyCode"></el-input>
<div class="divVerifyCodeImg" @click="getVerifyCode(true)">
<img id="verifyCodeImg" style="height:40px; width: 100px; cursor: pointer;" alt="點擊更換" title="點擊更換" />
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" id="login" style="width:160px" @click="submitForm("form")">登錄</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapMutations } from "vuex"
export default {
data() {
return {
form: {
username: "",
password: "",
verifyCode: "",
},
rules: {
username: [
{required: true, message: "用戶名不能為空", trigger: "blur"},
],
password: [
{required: true, message: "密碼不能為空", trigger: "blur"},
{min: 6, max: 30, message: "密碼6-30位", trigger: "blur"}
],
verifyCode: [
{required: true, message: "驗證碼不能為空", trigger: "blur"},
]
}
};
},
methods: {
// 提交登錄
submitForm(formName) {
let _this = this;
// 執(zhí)行校驗
this.$refs[formName].validate(valid => {
// 驗證通過為true，有一個不通過就是false
if (valid) {
// 通過校驗
// 登錄處理
// ....
} else {
// 沒通過校驗
console.log("驗證失敗");
return false;
}
});
},
}
}
</script>??form項，指明使用校驗規(guī)則：
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
??:rules="rules" 指明了校驗規(guī)則使用rules規(guī)則對象，你也可以使用其它名稱，如rules1。
??prop項，指明哪些字段可能使用校驗規(guī)則：
<el-form-item label="用戶名：" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item>
??如果prop項指定的屬性值，如username，在rules中也有相應(yīng)的項，則表示該屬性值執(zhí)行規(guī)則校驗。這個屬性必須是form的model屬性綁定的數(shù)據(jù)對象的屬性，本例中為form，其在data中定義：
form: {
username: "",
password: "",
verifyCode: "",
},??rules項，即校驗規(guī)則集，其在data中定義，其名稱必須與form的:rules屬性綁定的rules規(guī)則對象名一致。
rules: {
username: [
{required: true, message: "用戶名不能為空", trigger: "blur"},
],
password: [
{required: true, message: "密碼不能為空", trigger: "blur"},
{min: 6, max: 30, message: "密碼6-30位", trigger: "blur"}
],
verifyCode: [
{required: true, message: "驗證碼不能為空", trigger: "blur"},
]
}??這是一個對象，每個元素的類型為：{屬性名：[rule]}，屬性名對于prop的屬性值。[rule]是一個規(guī)則數(shù)組，規(guī)則數(shù)組的每一項是一條對本屬性的校驗規(guī)則。
??rule項，即規(guī)則數(shù)組的元素，這是本文要重點探討的項目。這里先就上述rules的各元素項解析一下：
required：表示是否必須有值，取值為true/false，如為true，表示必須有值，如果無值，則校驗不通過；如為false，則允許無值，但在有值的情況下，不影響其它規(guī)則的使用。
message：提示消息，在校驗不通過時提示此消息。
trigger：觸發(fā)方式，取值為blur/change，blue表示失去焦點，一般在input組件中使用；change為值改變，一般在選擇框中使用。
min：字符串最小長度。
max：字符串最大長度。
??有了這些解釋，不難理解上述rules定義的各屬性的校驗規(guī)則。
this.$refs[‘form"].validate(valid => {
// 驗證通過為true，有一個不通過就是false
if (valid) {
// 通過校驗
} else {
// 沒通過校驗
}
});??這個validate方法，要求所有校驗規(guī)則都通過，才放行。其中，$refs[‘form"]，指向form的ref屬性值。
??規(guī)則校驗的核心為為async-validator插件，官網(wǎng)：https://github.com/yiminghe/async-validator。
??Element-UI使用了該插件，并進(jìn)行了封裝。官網(wǎng)：https://element.eleme.cn/#/zh-CN/component/form。
??因此兩邊的資料都會有幫助。
??有時候，prop不是一個簡單的屬性，而是包在其它對象下的屬性。如：
<el-form-item label="登 錄 名：" prop="formData.loginName"> <el-input v-model="form.formData.loginName" :disabled="form.formData.userId != 0"></el-input> </el-form-item>
??form的model綁定的form對象，其形式為：
form:{
// form數(shù)據(jù)字段，為提交后端方便，建議與UserInfo字段命名一致
formData : {
userId : 0,
loginName : "",
passwd : "",
// ...
},
// 用戶類型選擇框當(dāng)前顯示值
userTypeLabel : "",
// ...
},??此時，rules的元素定義，不能用下列形式：
formData.loginName: [
{required: true, message: "登錄名不能為空", trigger: "blur"},
],??這樣，編譯會報錯！
??應(yīng)使用下列形式：
"formData.loginName": [
{required: true, message: "登錄名不能為空", trigger: "blur"},
],??即用單引號或雙引號將之包起來，變成一個字符串。
??關(guān)于自定義校驗器validator，網(wǎng)上的相關(guān)資料很多，如常用正則檢查的validator。
??規(guī)則定義方法：
"formData.loginName": [
{required: true, message: "登錄名不能為空", trigger: "blur"},
{validator:loginNameValidator, trigger: "blur"}
],??表示"formData.loginName"屬性使用了loginNameValidator的校驗器?？紤]到代碼的復(fù)用，一般將自定義的校驗器獨成了js文件，便于其它頁面或項目使用。
??在/src/common/目錄下，創(chuàng)建validator.js文件，代碼如下：
/* 登錄名校驗 */
export function loginNameValidator(rule, value, callback){
const reg= /^[a-zA-Z][w-. @]*$/;
if(value == "" || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error("要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號"));
}else {
callback();
}
}
}??在vue文件中導(dǎo)入此validator.js文件：
import {loginNameValidator} from "@/common/validator.js"??如果需導(dǎo)入多個外部校驗器，則在{}中包含多個，如{loginNameValidator,passwordValidator}。
??這里有個小坑，稍微提一句。
??根據(jù)目錄結(jié)構(gòu)，我先使用下列語句：
import {loginNameValidator} from "../../../common/validator.js"??結(jié)果，編譯錯誤，說找不到"../../../common/validator.js"文件，于是各種路徑表示方法嘗試，均告失敗。最后還是使用改用@通過了，因為/bulid/webpack.base.conf.js中配置了alias，指示@表示src目錄。
??回到自定義validator，其形式為：
function ValidatorFuncName(rule, value, callback)
??方法名，隨意指定。
??實際上，其完整形式為：
function ValidatorFuncName(rule, value, callback, source, options)
??參數(shù)含義如下：
rule：指向規(guī)則的對象，可以在方法代碼中，加入第一句：
console.log(rule);
可將rule參數(shù)打印出來看，就是本條規(guī)則的對象數(shù)據(jù)。
value：屬性的值，該值為需要校驗的值。
callback：指向校驗結(jié)束的回調(diào)函數(shù)，如果校驗通過，調(diào)用callback()，如果未通過，一般使用下列形式：
callback(new Error("具體的提示信息"));
??或帶參數(shù)的提示：
return callback(new Error(`${rule.field} must be lowercase alphanumeric characters`));??注意，字符串格式化，不是使用單引號括起來，而是用“~”符號括起來。
??也可以使用async-validator官網(wǎng)(https://github.com/yiminghe/async-validator)的方法：
util.format("%s must be lowercase alphanumeric characters", rule.field),??util文件中包含format方法，這個util.ts文件，在官網(wǎng)的src/目錄下，這是個ts文件，可以類似做一個公共方法。
??實際上，可以返回一個Error的數(shù)組，即errors，如：
const errors = [];
errors.push(new Error("要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號"));
errors.push(new Error("3444要求為：英文"));
return callback(errors);??但從實際效果看，表單只顯示了第一行的提示，估計Element的表單不支持顯示多行錯誤信息。
source：為調(diào)用校驗的屬性對象，可以打印出來看一下。
options，附加參數(shù)，主要是預(yù)定義的消息格式，也可以打印出來看一下。
??更復(fù)雜的校驗器，可以攜帶參數(shù)，如：
// 整數(shù)范圍值校驗
export const intRangeValidator = (min, max) => (rule, value, callback) => {
var isInRange = (value >= min) && (value <= max);
const reg = /^-?d+$/;
var isInt = reg.test(value);
if (isInRange && isInt){
return callback();
}else{
return callback(new Error(`要求是在${min}到${max}的整數(shù) [${min}, ${max}]`));
}
}??使用方法：
"formData.age": [
{validator: intRangeValidator(1,100), trigger: "blur"}
],??表示，formData.age屬性的取值范圍為1-100的整數(shù)。
??自定義校驗器validator提供了自由發(fā)揮的空間，可以使用正則匹配、數(shù)值計算和比較等運算等，進(jìn)行復(fù)雜的校驗，因此比較常用。但用自定義校驗器validator，有時會顯得過于繁瑣。
??自定義校驗器validator不一定要放置在外部文件中，也可以放置vue文件中。
??放置在data中，但不被return所包括的位置，尾部沒有逗號。
const loginNameValidator = (rule, value, callback) => {
const reg= /^[a-zA-Z][w-. @]*$/;
if(value == "" || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error("要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號"));
}else {
callback();
}
}
}??或直接在規(guī)則中定義：
"formData.loginName": [
{required: true, message: "登錄名不能為空", trigger: "blur"},
{validator(rule, value, callback){
const reg= /^[a-zA-Z][w-. @]*$/;
if(value == "" || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error("要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號"));
}else {
callback();
}
}
},
trigger: "blur"}
],??類型type的基本用法如下：
"formData.age": [
{type: "integer",message: "值要求為整數(shù)",trigger: "blur"},
],??類型也是一個規(guī)則項，如不符合類型要求，則提示錯誤信息。
??規(guī)則支持的類型如下：
string，字符串類型，這是默認(rèn)類型。如不指定type，默認(rèn)就是string。
number，數(shù)字類型。包括整數(shù)和小數(shù)。
integer，整數(shù)類型。
float，浮點數(shù)類型，此時不能為整數(shù)，必須有小數(shù)點。
boolean，布爾類型，true/false值。
array，數(shù)組類型。
object，對象類型，不能為數(shù)組。
enum，枚舉類型，然后需要聲明該枚舉類型。
method，函數(shù)（或方法）類型。
regexp，正則類型，必須是一個合法的正則表達(dá)式，可以通過new RegExp來創(chuàng)建。
date，日期類型，值必須可以轉(zhuǎn)為有效日期值。
url，url類型，值需要符合url格式。
email，email類型，符合郵箱格式格式。
hex，16進(jìn)制表示的形式。如0xFF12。
any，任意類型，不限制。
??這里的url和email類型，可以直接用于相關(guān)含義的屬性校驗，如：
"formData.email": [
{type: "email", message: "必須符合郵箱地址格式",trigger: "blur"}
],??日期類型也比較有用，這些內(nèi)置類型，使得我們可以不必通過自定義校驗器validator來處理。
??對于數(shù)值類型（number，integer，float）以及boolean型，由于input輸入的都為字符串，因此必須進(jìn)行類型轉(zhuǎn)換，否則校驗通不過。這里涉及到transform的用法。
??transform是一個鉤子函數(shù)，在開始驗證之前可以對數(shù)據(jù)先處理后驗證。如下面示例：
"formData.age": [
{
type: "integer",
message: "值要求為整數(shù)",
trigger: "blur",
transform(value){return parseInt(value);},
},
],??經(jīng)過transform類型轉(zhuǎn)化后，formData.age屬性的校驗規(guī)則就能正常使用了，否則總是通不過類型校驗。（這里實際上有點問題，如允許輸出12ab這種形式的值，parseInt得到值為12）
??對于類型轉(zhuǎn)換，transform還有更簡潔而嚴(yán)格的表述：
"formData.age": [
{
type:"integer",
message: "值要求為整數(shù)",
trigger: "blur",
transform：Number},
},
],??表示轉(zhuǎn)換為數(shù)字類型，這樣就行了。值為1.2或12ab都不能通過校驗。
??transform除了類型轉(zhuǎn)換外，還可以進(jìn)行其它處理，如：
"formData.age": [
{type : "string",pattern:/1/,message: "值要求為1-100的數(shù)",transform(value){return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";},}
],??等于某個值：
"formData.age": [
{type : "string",pattern:/1/,message: "值要求必須為50",transform(value){return value == "50" ? "1" : "0";},}
],??不等于某個值：
"formData.age": [
{type : "string",pattern:/0/,message: "值要求不能為50",transform(value){return value == "50" ? "1" : "0";},}
],??Range不是規(guī)則的屬性字段，其通過min和max屬性來體現(xiàn)。
??如果類型type為string或array，則min和max表示長度。
??如果類型type為數(shù)值類型（number，integer，float），則min和max表示值的范圍。如：
"formData.age": [
{
type:"integer",
message: "值要求為1-100的整數(shù)",
min: 1,
max:100,
trigger:"blur",
transform:Number,
},
],??這樣，范圍校驗直接可使用規(guī)則的內(nèi)置屬性，在規(guī)則中進(jìn)行描述，也無需用intRangeValidator校驗器和正則匹配方式了。
??枚舉值類型的用法示例：
"formData.idType": [
{
type: "enum", enum: [2,4,6], message: `結(jié)果不存在`, trigger: ["change", "blur"], transform(value) {return Number(value) * 2},
},
],
??或：
"formData.gender": [
{
type: "enum", enum: ["male","female"], message: `結(jié)果不存在`, trigger: ["change", "blur"],
},
],??使用有下列問題：
反應(yīng)比較遲鈍，就是一開始幾次輸入，沒有校驗，一旦有校驗了，后面都就可以了。
對于后一種情況，即范圍為字符串的集合，校驗正常。對于前一種情況，即范圍為整數(shù)型的，0也通過校驗了，導(dǎo)致任意字符串也通過校驗了，這是一個bug。
??因此，也可以利用字符串枚舉值，來校驗范圍：
"formData.age": [
{
type : "enum",
enum:["1"],
message: "值要求為1-100的數(shù)",
transform(value){
if (!isNaN(value)){
return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";
}else{
return "0";
}
}
},
],??注意：此時1e3，9e811被認(rèn)為是通過校驗了，因為parseInt函數(shù)只取e前面的數(shù)字，而isNaN認(rèn)為是數(shù)字?？磥磉€是需要與正則規(guī)則配合才行。
??pattern屬性，就是正則表達(dá)式匹配校驗規(guī)則，如：
"formData.loginName": [
{required: true, message: "登錄名不能為空", trigger: "blur"},
{pattern:/^[a-zA-Z][w-. @]*$/,
message:"要求為：英文字母開頭，后續(xù)為字母數(shù)字及_-. @符號",
trigger: "blur"}
],??效果與之前的loginNameValidator校驗器相同，區(qū)別在于loginNameValidator可以復(fù)用，保持一個正則校驗，如需修改，只需改動一處。而使用pattern則不然。但使用pattern可以少寫自定義校驗器，給了用戶一個選擇。
??使用pattern屬性，可以進(jìn)行等于某個值某個值的校驗。
??等于某個值：
{pattern:/120/,message:"必須必須為120",trigger: "blur"}??關(guān)于js正則表達(dá)式，可先用js正則表達(dá)式在線測試工具測試一下，檢查是否達(dá)到預(yù)期效果。js正則表達(dá)式在線測試地址：https://c.runoob.com/front-end/854。
??len屬性，如果類型為string或array，則冷表示長度。如果為數(shù)字型，則表示數(shù)字值就是len屬性值。
??len屬性與min、max屬性同時出現(xiàn)了，len屬性有更高的優(yōu)先級。
??len屬性，可用于格式化的字符串校驗，如身份證號碼長度。
??len也可用于等于某個數(shù)值的校驗，如：
"formData.age": [
{
type:"integer",
message: "值要求必須為6周歲",
len: 6,
trigger:"blur",
transform:Number,
},
],??空白表示全部由空格組成的字符串，規(guī)則的類型必須為string。如果匹配規(guī)則，則告警提示。如：
"formData.email": [
{whitespace: true, message: "只存在空格", trigger: "blur"}
],??值為空格，會提示告警。
??如果不希望空格干擾校驗，可用transform來處理：
transform(value) { return value.trim();}??message支持i18n，即國際化處理，如集成vue-i18n，message屬性的用法如下：
message: () => this.$t( "about" )
??中文語言顯示“關(guān)于”，英文語言顯示“about”。
??當(dāng)然，你也可以換成任意的其它函數(shù)，如：
message: () => this.myMessageHandler(MessageId,paramValues)
??異步校驗器用于遠(yuǎn)程訪問，利用ajax或axios請求數(shù)據(jù)，對響應(yīng)數(shù)據(jù)進(jìn)行校驗或?qū)Ξ惓＿M(jìn)行提示。
??本地頁面校驗，屬于串行校驗，逐個檢查各字段的校驗規(guī)則，遇到未通過即返回校驗失敗。
??遠(yuǎn)程校驗，為異步校驗，多個請求，響應(yīng)時間各有不同，響應(yīng)的先后次序就無法預(yù)知。
??異步校驗的作用：可以將前端和后端針對相同屬性字段，使用相同的校驗規(guī)則，統(tǒng)一由后端提供校驗。但這同樣增加了前后端溝通和一致性維護的成本。
??目前暫時未用到異步校驗器，這里用官網(wǎng)的示例：
asyncField1:{asyncValidator: myAsyncValidator}
??myAsyncValidator可類似validator位置放置。假設(shè)放置在data中。
const myAsyncValidator = (rule, value, callback) => {
ajax({
url: "xx",
value: value,
}).then(function(data) {
callback();
}, function(error) {
callback(new Error(error));
});
}??Promise異步字段校驗：
const myAsyncValidator = (rule, value) => {
return ajax({
url: "xx",
value: value,
});
}??區(qū)別在于Promise異步字段校驗，需要使用者自己寫上.then/.catch處理邏輯，不支持回調(diào)。
??異步校驗，還涉及到Options屬性，
options: { first: true },??first為true，表示多個異步校驗遇到第一校驗失敗就不再處理其它異步校驗。
??對于對象Object或數(shù)組Array的校驗，需要具體到每一個元素（成員），這里就要用到Deep rules。
??Deep rules涉及到fields和defaultField兩個屬性。
??如官網(wǎng)示例（按照習(xí)慣形式略作修改）：
??對象的深層校驗：
rules : {
address: [{
type: "object",
required: true,
options: { first: true },
fields: {
street: [{ type: "string", required: true }],
city: [{ type: "string", required: true }],
zip: [{ type: "string", required: true, len: 8, message: "invalid zip" }],
},
}],
name: [{ type: "string", required: true }],
};??數(shù)組的深層校驗：
rules : {
roles: [{
type: "array",
required: true,
len: 3,
fields: {
0: [{ type: "string", required: true }],
1: [{ type: "string", required: true }],
2: [{ type: "string", required: true }],
},
}],
};??數(shù)組的深層校驗，看起來比較傻，每個成員都要設(shè)置校驗規(guī)則，對于動態(tài)數(shù)組，似乎也不知該如何設(shè)置。
??defaultField屬性，使我們對字段校驗規(guī)則有了統(tǒng)一設(shè)置的手段。此屬性可以作用在校驗屬性字段上，也可以作用在fields上。
??例如：
rules : {
urls: [{
type: "array",
required: true,
defaultField: { type: "url" },
}],
};??如果是對象數(shù)組，該如何設(shè)置？可如下方式：
rules : {
persons: [{
type: "array",
required: true,
defaultField:{
type: "object",
required: true,
fields: {
address: [{
type: "object",
required: true,
fields: {
street: [{ type: "string", required: true }],
city: [{ type: "string", required: true }],
zip: [{ type: "string", required: true, len: 8,
message: "invalid zip" }],
},
}],
name: [{ type: "string", required: true }],
}
}
}],
};??數(shù)組套對象，對象套子對象，看起來有點復(fù)雜。
??有時候不同模式進(jìn)入表單，需要應(yīng)用不同的規(guī)則。如新增和編輯操作，顯示同一個頁面組件。但此時對頁面需要校驗的屬性字段有所不同，如何設(shè)置？
??有兩個處理方案。方案1是配置兩套規(guī)則集，根據(jù)不同模式進(jìn)行切換；方案2是配置總的規(guī)則集，根據(jù)不同模式抽取合適的屬性字段和規(guī)則，動態(tài)構(gòu)建規(guī)則集。
??切換校驗規(guī)則集，示例代碼如下：
// data 部分
// 當(dāng)前規(guī)則集
rules:{},
// 模式1規(guī)則集
rules1:{
...
},
// 模式2規(guī)則集
rules2:{
...
},
// methods部分
// 動態(tài)切換
// 頁面初始化
init(obj,data){
this.prevForm = obj;
// 設(shè)置頁面可見
this.visible = true;
// DOM更新之后執(zhí)行
this.$nextTick(()=>{
// 重置當(dāng)前頁面的所有字段值
this.$refs["form"].resetFields();
if (data){
// 模式1
this.form.patternType = 1;
}else{
// 模式2
this.form.patternType = 2;
}
// 設(shè)置校驗規(guī)則
this.setValidRules(this.form.patternType);
}
},
setValidRules(patternType){
if(patternType == 1){
this.rules = this.rules1;
}else if(patternType == 2){
this.rules = this.rules2;
}
},??這樣，根據(jù)不同模式，切換了校驗規(guī)則集。為了切換規(guī)則時，立即執(zhí)行規(guī)則校驗，需要設(shè)置el-form的validate-on-rule-change為false，即：
<el-form ref="form" :model="form" :rules="rules" :validate-on-rule-change=false class="useredit" label-width="100px" style="line-height: 30px;">
??動態(tài)構(gòu)建校驗規(guī)則集，示例代碼如下：
// data 部分
// 當(dāng)前規(guī)則集
rules:{},
// 規(guī)則全集
allRules:{
"formData.loginName": [
{required: true, message: "登錄名不能為空", trigger: "blur"},
{validator:loginNameValidator, trigger: "blur"}
],
"formData.passwd": [
{required: true, message: "密碼不能為空", trigger: "blur"},
{min: 6, max: 18, message: "密碼6-18位", trigger: "blur"}
],
"formData.email": [
{type: "email", message: "需要符合email格式", trigger: "blur"}
],
genderLabel: [
{required: true, message: "性別不能為空", trigger: "change"},
],
userTypeLabel : [
{required: true, message: "用戶類型不能為空", trigger: "change"},
],
deptLabel: [
{required: true, message: "部門不能為空", trigger: "change"},
]
},
// methods部分
// 動態(tài)切換
// 頁面初始化
init(obj,data){
this.prevForm = obj;
// 設(shè)置頁面可見
this.visible = true;
// DOM更新之后執(zhí)行
this.$nextTick(()=>{
// 重置當(dāng)前頁面的所有字段值
this.$refs["form"].resetFields();
if (data){
// 模式1
this.form.patternType = 1;
}else{
// 模式2
this.form.patternType = 2;
}
// 設(shè)置校驗規(guī)則
this.setValidRules(this.form.patternType);
}
},
setValidRules(patternType){
if (patternType == 1){
// 模式1
// 先清空，再設(shè)置
this.rules = {};
this.rules["genderLabel"] = this.allRules["genderLabel"];
this.rules["userTypeLabel"] = this.allRules["userTypeLabel"];
this.rules["deptLabel"] = this.allRules["deptLabel"];
this.rules["formData.email"] = this.allRules["formData.email"];
} else{
// 模式2，需要驗證登錄名和密碼
this.rules = {};
this.rules["formData.loginName"] = this.allRules["formData.loginName"];
this.rules["formData.passwd"] = this.allRules["formData.passwd"];
this.rules["genderLabel"] = this.allRules["genderLabel"];
this.rules["userTypeLabel"] = this.allRules["userTypeLabel"];
this.rules["deptLabel"] = this.allRules["deptLabel"];
this.rules["formData.email"] = this.allRules["formData.email"];
}
},??同樣也需要設(shè)置el-form的validate-on-rule-change為false。
??有的表單，使用了可編輯的動態(tài)表格，如添加一數(shù)據(jù)行，直接在數(shù)據(jù)行中輸入數(shù)據(jù)，然后提交。此時需要對數(shù)據(jù)行各字段的輸入進(jìn)行校驗。
??有2個方案。
??方案1使用Deep rules的defaultField，對對象數(shù)組進(jìn)行字段校驗，見上面的示例代碼。
??方案2，在el-form-item層級使用rules屬性綁定該字段規(guī)則。
??多字段聯(lián)合校驗應(yīng)用場合還是比較常見的，如文本開始的問題，不同ID類型，有不同的校驗規(guī)則；如密碼驗證，兩次密碼要相同；如購買數(shù)量不能超過庫存數(shù)量，時間段開始時間要不大于結(jié)束時間，等等。
??關(guān)鍵技巧，利用校驗器的第一個參數(shù)rule，添加一個或若干個自定義屬性，傳遞信息到校驗器進(jìn)行處理。使用方法如下：
??作為示例，假設(shè)"formData.email"字段校驗依賴于userType的值。
"formData.email": [
{validator : idFieldWithTypeValidator, trigger: "blur",}
],??沒有辦法初始綁定：
"formData.email": [
{validator : idFieldWithTypeValidator, trigger: "blur","userType":this.form.formData.userype}
],??這樣寫，瀏覽器調(diào)試器顯示錯誤，提示調(diào)用resetFields出錯。
??因此，正確的形式為：
"formData.email": [
{validator : idFieldWithTypeValidator, trigger: "blur",}
],??或：
"formData.email": [
{validator : idFieldWithTypeValidator, trigger: "blur","userType":0}
],??然后，在頁面初始化時，或選擇框選擇改變的chage事件方法中，動態(tài)設(shè)置規(guī)則中userType屬性的值：
this.rules["formData.email"][0]["userType"] = this.form.formData.userType;
??試驗結(jié)果，用$set沒法動態(tài)綁定，即下列語句沒有作用：
this.$set(this.allRules["formData.email"][0],"userType",this.form.formData.userType);
??好了，現(xiàn)在可以編寫一個聯(lián)合校驗器idFieldWithTypeValidator了。簡單起見，在data部分編寫：
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 獲取用戶類型
console.log(rule);
return callback();
}??測試一下，在瀏覽器控制臺輸出rule的打印信息如下：
{
"userType": 2,
"field": "formData.email",
"fullField": "formData.email",
"type": "string"
}??此時，userType已經(jīng)通過rule參數(shù)傳入，現(xiàn)在可以進(jìn)行聯(lián)合校驗了。
import {loginNameValidator,phoneNoValidator,idNoValidator,eMailValidator} from "@/common/validator.js"
export default {
data() {
// 不同類型情況下的ID字段校驗器
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 獲取用戶類型
console.log(rule);
if (rule.userType == 1){
// 手機號碼
phoneNoValidator(rule, value, callback);
}else if(rule.userType == 2){
// 身份證號碼
idNoValidator(rule, value, callback);
}else if(rule.userType == 3){
// email
eMailValidator(rule, value, callback);
}
}
return {
....
}
},
...
}其中phoneNoValidator、idNoValidator、eMailValidator分別是手機號碼校驗器、身份證號碼校驗器、郵箱格式校驗器，由validator.js中輸出，idFieldWithTypeValidator校驗器根據(jù)userType參數(shù)的取值不同，分別調(diào)用了相關(guān)的validator類型的校驗器。當(dāng)然，在idFieldWithTypeValidator的方法代碼中，也可以將各個校驗器的代碼搬過來，不調(diào)用外部校驗器。
以上就是“Vue Element-ui表單校驗規(guī)則怎么實現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼