1、前言
??Element-ui表單校驗規則，使得錯誤提示可以直接在form-item下面顯示，無需彈出框，因此還是很好用的，
??我在做了登錄頁面的表單校驗后，一度以為我已經很了解表單的校驗規則，但我在深入使用表單校驗規則時，遇到下列問題：
- 如何判斷屬性值是否在某個范圍內，且這個范圍可以任意指定？
- 如何判斷屬性值是否為某個值？
- 多個屬性聯合校驗，當前屬性的校驗規則依賴于另一個屬性的值，如何進行校驗？如注冊頁面，ID型別有郵箱地址、手機號和身份證號碼，選擇不同型別，IDValue屬性的校驗規則是不同，如何處理？
- 兩種模式，進入同一個表單組件，某些欄位可以不使用校驗規則，即rules的物件會有所不同，這種情況如何處理？
??上述問題，讓我感覺幾乎成了小白，于是迫使我從頭開始研究校驗規則，查閱相關檔案，
??本文分享一下對于表單校驗規則的心得體會，
2、規則校驗的入門模式
2.1、示例代碼
??作為規則校驗的入門，以登錄頁面為例，代碼如下：
<template>
<div >
<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
<h2 >XX管理系統登錄</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 @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;
// 執行校驗
this.$refs[formName].validate(valid => {
// 驗證通過為true，有一個不通過就是false
if (valid) {
// 通過校驗
// 登錄處理
// ....
} else {
// 沒通過校驗
console.log('驗證失敗');
return false;
}
});
},
}
}
</script>
2.2、form項
??form項，指明使用校驗規則：
<el-form ref="form" :model="form" :rules="rules" label-width="80px" >
??:rules="rules" 指明了校驗規則使用rules規則物件，你也可以使用其它名稱，如rules1，
2.3、prop項
??prop項，指明哪些欄位可能使用校驗規則：
<el-form-item label="用戶名：" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
??如果prop項指定的屬性值，如username，在rules中也有相應的項，則表示該屬性值執行規則校驗，這個屬性必須是form的model屬性系結的資料物件的屬性，本例中為form，其在data中定義：
form: {
username: "",
password: "",
verifyCode: "",
},
2.4、rules項
??rules項，即校驗規則集，其在data中定義，其名稱必須與form的:rules屬性系結的rules規則物件名一致，
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]是一個規則陣列，規則陣列的每一項是一條對本屬性的校驗規則，
2.5、rule項
??rule項，即規則陣列的元素，這是本文要重點探討的專案，這里先就上述rules的各元素項決議一下：
- required：表示是否必須有值，取值為true/false，如為true，表示必須有值，如果無值，則校驗不通過；如為false，則允許無值，但在有值的情況下，不影響其它規則的使用，
- message：提示訊息，在校驗不通過時提示此訊息，
- trigger：觸發方式，取值為blur/change，blue表示失去焦點，一般在input組件中使用；change為值改變，一般在選擇框中使用，
- min：字串最小長度，
- max：字串最大長度，
??有了這些解釋，不難理解上述rules定義的各屬性的校驗規則，
2.6、使用規則
this.$refs[‘form’].validate(valid => {
// 驗證通過為true，有一個不通過就是false
if (valid) {
// 通過校驗
} else {
// 沒通過校驗
}
});
??這個validate方法，要求所有校驗規則都通過，才放行，其中，$refs[‘form’]，指向form的ref屬性值，
2.7、規則校驗的核心
??規則校驗的核心為為async-validator插件，官網：https://github.com/yiminghe/async-validator，
??Element-UI使用了該插件，并進行了封裝，官網：https://element.eleme.cn/#/zh-CN/component/form，
??因此兩邊的資料都會有幫助，
3、規則校驗的進階模式
3.1、嵌套物件屬性名
??有時候，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資料欄位，為提交后端方便，建議與UserInfo欄位命名一致
formData : {
userId : 0,
loginName : '',
passwd : '',
// ...
},
// 用戶型別選擇框當前顯示值
userTypeLabel : "",
// ...
},
??此時，rules的元素定義，不能用下列形式：
formData.loginName: [
{required: true, message: "登錄名不能為空", trigger: 'blur'},
],
??這樣，編譯會報錯！
??應使用下列形式：
'formData.loginName': [
{required: true, message: "登錄名不能為空", trigger: 'blur'},
],
??即用單引號或雙引號將之包起來，變成一個字串，
3.2、自定義校驗器validator
??關于自定義校驗器validator，網上的相關資料很多，如常用正則檢查的validator，
??規則定義方法：
'formData.loginName': [
{required: true, message: "登錄名不能為空", trigger: 'blur'},
{validator:loginNameValidator, trigger: 'blur'}
],
??表示'formData.loginName'屬性使用了loginNameValidator的校驗器，考慮到代碼的復用，一般將自定義的校驗器獨成了js檔案，便于其它頁面或專案使用，
??在/src/common/目錄下，創建validator.js檔案，代碼如下：
/* 登錄名校驗 */
export function loginNameValidator(rule, value, callback){
const reg= /^[a-zA-Z][\w-. @]*$/;
if(value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/='' || value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/= undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error('要求為：英文字母開頭，后續為字母數字及_-. @符號'));
}else {
callback();
}
}
}
??在vue檔案中匯入此validator.js檔案：
import {loginNameValidator} from '@/common/validator.js'
??如果需匯入多個外部校驗器，則在{}中包含多個，如{loginNameValidator,passwordValidator}，
??這里有個小坑，稍微提一句，
??根據目錄結構，我先使用下列陳述句：
import {loginNameValidator} from '../../../common/validator.js'
??結果，編譯錯誤，說找不到'../../../common/validator.js'檔案，于是各種路徑表示方法嘗試，均告失敗，最后還是使用改用@通過了，因為/bulid/webpack.base.conf.js中配置了alias，指示@表示src目錄，
??回到自定義validator，其形式為：
function ValidatorFuncName(rule, value, callback)
??方法名，隨意指定，
??實際上，其完整形式為：
function ValidatorFuncName(rule, value, callback, source, options)
??引數含義如下：
-
rule：指向規則的物件，可以在方法代碼中，加入第一句：
console.log(rule);可將rule引數列印出來看，就是本條規則的物件資料，
-
value：屬性的值，該值為需要校驗的值，
-
callback：指向校驗結束的回呼函式，如果校驗通過，呼叫callback()，如果未通過，一般使用下列形式：
callback(new Error('具體的提示資訊'));
??或帶引數的提示：
return callback(new Error(`${rule.field} must be lowercase alphanumeric characters`));
??注意，字串格式化，不是使用單引號括起來，而是用“~”符號括起來，
??也可以使用async-validator官網(https://github.com/yiminghe/async-validator)的方法：
util.format('%s must be lowercase alphanumeric characters', rule.field),
??util檔案中包含format方法，這個util.ts檔案，在官網的src/目錄下，這是個ts檔案，可以類似做一個公共方法，
??實際上，可以回傳一個Error的陣列，即errors，如：
const errors = [];
errors.push(new Error('要求為：英文字母開頭，后續為字母數字及_-. @符號'));
errors.push(new Error('3444要求為：英文'));
return callback(errors);
??但從實際效果看，表單只顯示了第一行的提示，估計Element的表單不支持顯示多行錯誤資訊，
- source：為呼叫校驗的屬性物件，可以列印出來看一下，
- options，附加引數，主要是預定義的訊息格式，也可以列印出來看一下，
??更復雜的校驗器，可以攜帶引數，如：
// 整數范圍值校驗
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}的整數 [${min}, ${max}]`));
}
}
??使用方法：
'formData.age': [
{validator: intRangeValidator(1,100), trigger: 'blur'}
],
??表示，formData.age屬性的取值范圍為1-100的整數，
??自定義校驗器validator提供了自由發揮的空間，可以使用正則匹配、數值計算和比較等運算等，進行復雜的校驗，因此比較常用，但用自定義校驗器validator，有時會顯得過于繁瑣，
??自定義校驗器validator不一定要放置在外部檔案中，也可以放置vue檔案中，
??放置在data中，但不被return所包括的位置，尾部沒有逗號，
const loginNameValidator = (rule, value, callback) => {
const reg= /^[a-zA-Z][\w-. @]*$/;
if(value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/='' || value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/= undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error('要求為：英文字母開頭，后續為字母數字及_-. @符號'));
}else {
callback();
}
}
}
??或直接在規則中定義：
'formData.loginName': [
{required: true, message: "登錄名不能為空", trigger: 'blur'},
{validator(rule, value, callback){
const reg= /^[a-zA-Z][\w-. @]*$/;
if(value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/='' || value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/= undefined || value == null){
callback();
}else {
if (!reg.test(value)){
callback(new Error('要求為：英文字母開頭，后續為字母數字及_-. @符號'));
}else {
callback();
}
}
},
trigger: 'blur'}
],
3.3、型別type
??型別type的基本用法如下：
'formData.age': [
{type: 'integer',message: "值要求為整數",trigger: 'blur'},
],
??型別也是一個規則項，如不符合型別要求，則提示錯誤資訊，
??規則支持的型別如下：
- string，字串型別，這是默認型別，如不指定type，默認就是string，
- number，數字型別，包括整數和小數，
- integer，整數型別，
- float，浮點數型別，此時不能為整數，必須有小數點，
- boolean，布爾型別，true/false值，
- array，陣列型別，
- object，物件型別，不能為陣列，
- enum，列舉型別，然后需要宣告該列舉型別，
- method，函式（或方法）型別，
- regexp，正則型別，必須是一個合法的正則運算式，可以通過new RegExp來創建，
- date，日期型別，值必須可以轉為有效日期值，
- url，url型別，值需要符合url格式，
- email，email型別，符合郵箱格式格式，
- hex，16進制表示的形式，如0xFF12，
- any，任意型別，不限制，
??這里的url和email型別，可以直接用于相關含義的屬性校驗，如：
'formData.email': [
{type: 'email', message: "必須符合郵箱地址格式",trigger: 'blur'}
],
??日期型別也比較有用，這些內置型別，使得我們可以不必通過自定義校驗器validator來處理，
??對于數值型別（number，integer，float）以及boolean型，由于input輸入的都為字串，因此必須進行型別轉換，否則校驗通不過，這里涉及到transform的用法，
3.3、資料轉換transform
??transform是一個鉤子函式，在開始驗證之前可以對資料先處理后驗證，如下面示例：
'formData.age': [
{
type: 'integer',
message: "值要求為整數",
trigger: 'blur',
transform(value){return parseInt(value);},
},
],
??經過transform型別轉化后，formData.age屬性的校驗規則就能正常使用了，否則總是通不過型別校驗，（這里實際上有點問題，如允許輸出12ab這種形式的值，parseInt得到值為12）
??對于型別轉換，transform還有更簡潔而嚴格的表述：
'formData.age': [
{
type:'integer',
message: "值要求為整數",
trigger: 'blur',
transform：Number},
},
],
??表示轉換為數字型別，這樣就行了，值為1.2或12ab都不能通過校驗，
??transform除了型別轉換外，還可以進行其它處理，如：
'formData.age': [
{type : 'string',pattern:/1/,message: "值要求為1-100的數",transform(value){return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";},}
],
??等于某個值：
'formData.age': [
{type : 'string',pattern:/1/,message: "值要求必須為50",transform(value){return value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/="50" ? "1" : "0";},}
],
??不等于某個值：
'formData.age': [
{type : 'string',pattern:/0/,message: "值要求不能為50",transform(value){return value =https://www.cnblogs.com/alabo1999/archive/2021/07/09/="50" ? "1" : "0";},}
],
3.4、數值范圍Range
??Range不是規則的屬性欄位，其通過min和max屬性來體現，
??如果型別type為string或array，則min和max表示長度，
??如果型別type為數值型別（number，integer，float），則min和max表示值的范圍，如：
'formData.age': [
{
type:'integer',
message: "值要求為1-100的整數",
min: 1,
max:100,
trigger:'blur',
transform:Number,
},
],
??這樣，范圍校驗直接可使用規則的內置屬性，在規則中進行描述，也無需用intRangeValidator校驗器和正則匹配方式了，
3.5、列舉值
??列舉值型別的用法示例：
'formData.idType': [
{
type: 'enum', enum: [2,4,6], message: `結果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value) * 2},
},
],
??或：
'formData.gender': [
{
type: 'enum', enum: ['male','female'], message: `結果不存在`, trigger: ['change', 'blur'],
},
],
??使用有下列問題：
- 反應比較遲鈍，就是一開始幾次輸入，沒有校驗，一旦有校驗了，后面都就可以了，
- 對于后一種情況，即范圍為字串的集合，校驗正常，對于前一種情況，即范圍為整數型的，0也通過校驗了，導致任意字串也通過校驗了，這是一個bug，
??因此，也可以利用字串列舉值，來校驗范圍：
'formData.age': [
{
type : 'enum',
enum:["1"],
message: "值要求為1-100的數",
transform(value){
if (!isNaN(value)){
return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";
}else{
return "0";
}
}
},
],
??注意：此時1e3，9e811被認為是通過校驗了，因為parseInt函式只取e前面的數字，而isNaN認為是數字，看來還是需要與正則規則配合才行，
3.6、正則Pattern
??pattern屬性，就是正則運算式匹配校驗規則，如：
'formData.loginName': [
{required: true, message: "登錄名不能為空", trigger: 'blur'},
{pattern:/^[a-zA-Z][\w-. @]*$/,
message:'要求為：英文字母開頭，后續為字母數字及_-. @符號',
trigger: 'blur'}
],
??效果與之前的loginNameValidator校驗器相同，區別在于loginNameValidator可以復用，保持一個正則校驗，如需修改，只需改動一處，而使用pattern則不然，但使用pattern可以少寫自定義校驗器，給了用戶一個選擇，
??使用pattern屬性，可以進行等于某個值某個值的校驗，
??等于某個值：
{pattern:/120/,message:'必須必須為120',trigger: 'blur'}
??關于js正則運算式，可先用js正則運算式在線測驗工具測驗一下，檢查是否達到預期效果，js正則運算式在線測驗地址：https://c.runoob.com/front-end/854，
3.7、長度len
??len屬性，如果型別為string或array，則冷表示長度，如果為數字型，則表示數字值就是len屬性值，
??len屬性與min、max屬性同時出現了，len屬性有更高的優先級，
??len屬性，可用于格式化的字串校驗，如身份證號碼長度，
??len也可用于等于某個數值的校驗，如：
'formData.age': [
{
type:'integer',
message: "值要求必須為6周歲",
len: 6,
trigger:'blur',
transform:Number,
},
],
3.8、空白whitespace
??空白表示全部由空格組成的字串，規則的型別必須為string，如果匹配規則，則告警提示，如：
'formData.email': [
{whitespace: true, message: '只存在空格', trigger: 'blur'}
],
??值為空格，會提示告警，
??如果不希望空格干擾校驗，可用transform來處理：
transform(value) { return value.trim();}
3.9、i18n
??message支持i18n，即國際化處理，如集成vue-i18n，message屬性的用法如下：
message: () => this.$t( 'about' )
??中文語言顯示“關于”，英文語言顯示“about”，
??當然，你也可以換成任意的其它函式，如：
message: () => this.myMessageHandler(MessageId,paramValues)
4、規則校驗的高級模式
4.1、異步校驗器asyncValidator
??異步校驗器用于遠程訪問，利用ajax或axios請求資料，對回應資料進行校驗或對例外進行提示，
??本地頁面校驗，屬于串行校驗，逐個檢查各欄位的校驗規則，遇到未通過即回傳校驗失敗，
??遠程校驗，為異步校驗，多個請求，回應時間各有不同，回應的先后次序就無法預知，
??異步校驗的作用：可以將前端和后端針對相同屬性欄位，使用相同的校驗規則，統一由后端提供校驗，但這同樣增加了前后端溝通和一致性維護的成本，
??目前暫時未用到異步校驗器，這里用官網的示例：
asyncField1:{asyncValidator: myAsyncValidator}
??myAsyncValidator可類似validator位置放置，假設放置在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,
});
}
??區別在于Promise異步欄位校驗，需要使用者自己寫上.then/.catch處理邏輯，不支持回呼，
??異步校驗，還涉及到Options屬性，
options: { first: true },
??first為true，表示多個異步校驗遇到第一校驗失敗就不再處理其它異步校驗，
4.2、深層規則Deep rules
??對于物件Object或陣列Array的校驗，需要具體到每一個元素（成員），這里就要用到Deep rules，
??Deep rules涉及到fields和defaultField兩個屬性，
??如官網示例（按照習慣形式略作修改）：
??物件的深層校驗：
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 }],
};
??陣列的深層校驗：
rules : {
roles: [{
type: 'array',
required: true,
len: 3,
fields: {
0: [{ type: 'string', required: true }],
1: [{ type: 'string', required: true }],
2: [{ type: 'string', required: true }],
},
}],
};
??陣列的深層校驗，看起來比較傻，每個成員都要設定校驗規則，對于動態陣列，似乎也不知該如何設定，
??defaultField屬性，使我們對欄位校驗規則有了統一設定的手段，此屬性可以作用在校驗屬性欄位上，也可以作用在fields上，
??例如：
rules : {
urls: [{
type: 'array',
required: true,
defaultField: { type: 'url' },
}],
};
??如果是物件陣列，該如何設定？可如下方式：
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 }],
}
}
}],
};
??陣列套物件，物件套子物件，看起來有點復雜，
4.3、動態規則集
??有時候不同模式進入表單，需要應用不同的規則，如新增和編輯操作，顯示同一個頁面組件，但此時對頁面需要校驗的屬性欄位有所不同，如何設定？
??有兩個處理方案，方案1是配置兩套規則集，根據不同模式進行切換；方案2是配置總的規則集，根據不同模式抽取合適的屬性欄位和規則，動態構建規則集，
4.3.1、切換校驗規則集
??切換校驗規則集，示例代碼如下：
// data 部分
// 當前規則集
rules:{},
// 模式1規則集
rules1:{
...
},
// 模式2規則集
rules2:{
...
},
// methods部分
// 動態切換
// 頁面初始化
init(obj,data){
this.prevForm = obj;
// 設定頁面可見
this.visible = true;
// DOM更新之后執行
this.$nextTick(()=>{
// 重置當前頁面的所有欄位值
this.$refs['form'].resetFields();
if (data){
// 模式1
this.form.patternType = 1;
}else{
// 模式2
this.form.patternType = 2;
}
// 設定校驗規則
this.setValidRules(this.form.patternType);
}
},
setValidRules(patternType){
if(patternType == 1){
this.rules = this.rules1;
}else if(patternType == 2){
this.rules = this.rules2;
}
},
??這樣，根據不同模式，切換了校驗規則集，為了切換規則時，立即執行規則校驗，需要設定el-form的validate-on-rule-change為false，即：
<el-form ref="form" :model="form" :rules="rules"
:validate-on-rule-change=false
label-width="100px" style="line-height: 30px;">
4.3.2、動態構建校驗規則集
??動態構建校驗規則集，示例代碼如下：
// data 部分
// 當前規則集
rules:{},
// 規則全集
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部分
// 動態切換
// 頁面初始化
init(obj,data){
this.prevForm = obj;
// 設定頁面可見
this.visible = true;
// DOM更新之后執行
this.$nextTick(()=>{
// 重置當前頁面的所有欄位值
this.$refs['form'].resetFields();
if (data){
// 模式1
this.form.patternType = 1;
}else{
// 模式2
this.form.patternType = 2;
}
// 設定校驗規則
this.setValidRules(this.form.patternType);
}
},
setValidRules(patternType){
if (patternType == 1){
// 模式1
// 先清空，再設定
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'];
}
},
??同樣也需要設定el-form的validate-on-rule-change為false，
4.4、動態表格欄位校驗
??有的表單，使用了可編輯的動態表格，如添加一資料行，直接在資料行中輸入資料，然后提交，此時需要對資料行各欄位的輸入進行校驗，
??有2個方案，
??方案1使用Deep rules的defaultField，對物件陣列進行欄位校驗，見上面的示例代碼，
??方案2，在el-form-item層級使用rules屬性系結該欄位規則，可參見：https://www.jianshu.com/p/e51107b57366，
4.5、多欄位聯合校驗
??多欄位聯合校驗應用場合還是比較常見的，如文本開始的問題，不同ID型別，有不同的校驗規則；如密碼驗證，兩次密碼要相同；如購買數量不能超過庫存數量，時間段開始時間要不大于結束時間，等等，
??關鍵技巧，利用校驗器的第一個引數rule，添加一個或若干個自定義屬性，傳遞資訊到校驗器進行處理，使用方法如下：
??作為示例，假設'formData.email'欄位校驗依賴于userType的值，
'formData.email': [
{validator : idFieldWithTypeValidator, trigger: 'blur',}
],
??沒有辦法初始系結：
'formData.email': [
{validator : idFieldWithTypeValidator, trigger: 'blur','userType':this.form.formData.userype}
],
??這樣寫，瀏覽器除錯器顯示錯誤，提示呼叫resetFields出錯，
??因此，正確的形式為：
'formData.email': [
{validator : idFieldWithTypeValidator, trigger: 'blur',}
],
??或：
'formData.email': [
{validator : idFieldWithTypeValidator, trigger: 'blur','userType':0}
],
??然后，在頁面初始化時，或選擇框選擇改變的chage事件方法中，動態設定規則中userType屬性的值：
this.rules['formData.email'][0]['userType'] = this.form.formData.userType;
??試驗結果，用$set沒法動態系結，即下列陳述句沒有作用：
this.$set(this.allRules['formData.email'][0],'userType',this.form.formData.userType);
??好了，現在可以撰寫一個聯合校驗器idFieldWithTypeValidator了，簡單起見，在data部分撰寫：
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 獲取用戶型別
console.log(rule);
return callback();
}
??測驗一下，在瀏覽器控制臺輸出rule的列印資訊如下：
{
"userType": 2,
"field": "formData.email",
"fullField": "formData.email",
"type": "string"
}
??此時，userType已經通過rule引數傳入，現在可以進行聯合校驗了，
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校驗器根據userType引數的取值不同，分別呼叫了相關的validator型別的校驗器，當然，在idFieldWithTypeValidator的方法代碼中，也可以將各個校驗器的代碼搬過來，不呼叫外部校驗器，
??下面為補充內容：
??上述的解決方案的不好之處，是沒有將規則附加屬性”userType“值系結到data的form.formData.userType屬性上，沒法聯動，導致this.form.formData.userType修改之處，就需要設定，考慮到其它情況，如開始日期和結束日期的先后范圍校驗等情況，el-input或el-select的change事件來設定值帶來更多的代碼開銷，因此，考慮了一下，現在有了新的方法，即規則附加屬性是一個函式方法，此方法可以回傳this.form.formData.userType的最新值，
??代碼如下：
// methods下面，增加一個getUserTypeValue方法
getUserTypeValue(){
return this.form.formData.userType;
},
??data的rules的部分：
'formData.email': [
{validator : idFieldWithTypeValidator, trigger: 'blur','getValueFunc':this.getUserTypeValue,}
],
??直接配置了getValueFunc屬性，其值為getUserTypeValue方法，
??校驗器idFieldWithTypeValidator的代碼更新為：
// 不同型別情況下的ID欄位校驗器
const idFieldWithTypeValidator = (rule, value, callback) =>{
// 獲取獲取值的方法
var getvalueMethod= rule.getValueFunc;
// 呼叫方法，取得引數值，根據需要，可以回傳任意型別資料，如物件，陣列等
var userType = getvalueMethod();
// console.log(userType);
if (userType == 1){
// 手機號碼
phoneNoValidator(rule, value, callback);
}else if(userType == 2){
// 身份證號碼
idNoValidator(rule, value, callback);
}else if(userType == 3){
// email
eMailValidator(rule, value, callback);
}
}
??這樣，只要有一個函式方法來附加到規則中，根據需要，任意多個欄位聯合校驗都沒有問題，如getValueFunc回傳n個屬性的物件，就可以支持n+1個屬性欄位的聯合校驗，
5、參考文章
??除了官網資料外，本文還參考了下列文章：
[1]、淺析async-validator原始碼，https://zhuanlan.zhihu.com/p/32306570?edition=yidianzixun&utm_source=yidianzixun&yidian_docid=0I5IikUl，
[2]、Vue中Element表單驗證的基本要素， https://www.php.cn/js-tutorial-406545.html，
[3]、element-ui 表單校驗 Rules 配置，https://www.cnblogs.com/loveyt/archive/2020/07/11/13282518.html，
[4]、Element Ui使用技巧——Form表單的校驗規則rules詳細說明，https://www.cnblogs.com/xyyt/p/13366812.html，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/289038.html
標籤：其他