技術標籤：前端

正常情況下，我們使用elementUI的時候會採用自定義表單校驗，然後會自定義校驗規則。

但是在自定義規則校驗實踐過程中，發現會有兩個大坑！！！下面會詳細解釋

• 自定義校驗規則中不能直接寫return，比如if(!value)return;必須返回一個回撥函式callback()（返回callback的入參為空代表校驗通過規則，返回含new Error（‘自定義提示’）入參代表校驗不通過規則。）
• 必須保證自定義校驗規則的每個分支都呼叫了callback方法，否則會導致el-form元件的validate方法無法進入回撥函式。

重點來了，特別注意自定義規則這個方法的內容！！！！

 <el-form-item label="年齡" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>

//自定義校驗規則!!!
var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年齡不能為空'));
        }
     	if (value < 18) {
            callback(new Error('必須年滿18歲'));
            //注意，如果這裡把else分支去掉，也就是沒有callback()回撥，會發現，儲存不成功！  
        } else {
            callback();
        }
      };
//提交表單，進行儲存校驗
saveAndSubmit: function() {
	let loading = this.$loading()
	console.log("進入校驗前")
	this.$refs['model'].validate((valid) => {
	console.log("準備校驗")
	if (valid)
    .......省略程式碼      
 

第一坑：

比如if(!value) return callback(new Error('年齡不能為空'));

一定要寫callback,如果你想寫成if(!value) { alert("年齡不能為空"); return ; }這種方式是不行的！

第二坑：

自定義校驗方法每個分支必須要呼叫callback方法，不然會導致el-form元件的validate方法無法進入回撥函式！！

比如將下面的else去掉，會發現在提交表單的時候，不會進入回撥函式，也就是下面的console.log("準備校驗")不會輸出！！！

if (value < 18) {
callback(new Error('必須年滿18歲'));
//注意，如果這裡把else分支去掉，也就是沒有callback()回撥，會發現，儲存不成功！  
} else {
callback();
}

saveAndSubmit: function() {
	let loading = this.$loading()
	console.log("進入校驗前")
	this.$refs['model'].validate((valid) => {
	console.log("準備校驗")
	if (valid)
    .......省略程式碼