Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，并將 Form-Item 的 prop 屬性設置為需校驗的字段名即可。

知識點

• 根據文檔說明，model為表單的數據對象，el-form通過model綁定數據。
• rules為表單驗證規則對象，其中字段名要與model中的字段名一一對應
• el-form-item 容器，通過 label 綁定標簽，prop屬性設置為需要驗證的字段名
• 表單組件通過 v-model 綁定 model 中的數據

表單校驗相關屬性

• hide-required-asterisk：是否隱藏必填字段的標簽旁邊的紅色星號（隱藏必錄標識）
• inline-message：是否以行內形式展示校驗信息（驗證消息是否在一行顯示）

方式一 無表單嵌套

以一般的form表單為例

:model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    "活動名稱" prop="name"> 
        "ruleForm.name"></el-input> 
    </el-form-item>

一般在vue中這樣來寫,就可以對表單進行驗證。

data(){
    return {
        ruleForm: { name: '' },
        rules: {
            name: [ 
                { required: true, message: '請輸入活動名稱', trigger: 'blur' }, 
                { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } 
            ]
        }
    }
},

如果有一些復雜的驗證規則，也可以選擇自定義驗證, validator

data() {
 const userValidator = (rule, value, callback) => {
    if (value.length > 3) {
      callback()
    } else {
      callback(new Error('用戶名長度必須大于3'))
    }
  }
  return {}
}
rules: {
      user: [
        { validator: userValidator, trigger: 'change' }
      ]
    }

方式二 表單嵌套

嵌套的表單,一般業務場景是，有一些表單項需要按照條件顯示或者隱藏，data里面的model數據可能會是對象里面套對象的，el-form也同樣支持嵌套的驗證，寫法一般如下：

:model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">
    "活動名稱"> 
        "ruleForm.name"></el-input>
        "info.name"> 
            "ruleForm.info.name"></el-input>

        </el-form-item>
    </el-form-item>


data(){
    return {
           ruleForm: {
                info: {
                    name: ''
                }
            },
    }
}


rules里面同樣也可以這樣寫

rules: {
      info: {
          name: [{ required: true, message: '請選擇', trigger: 'change' }],
      }
    }

方式三 動態表單驗證

• 除了在 Form 組件上一次性傳遞所有的驗證規則外還可以在單個的表單域上傳遞屬性的驗證規則.
• 動態添加form-item的時候，可以使用

"email" label="郵箱" 
:rules="[ { required: true, message: '請輸入郵箱地址', trigger: 'blur' }, { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } ]" >
 "ValidateForm.email"></el-input> 
 </el-form-item>

方式四 動態添加校驗規則

根據條件判斷是否需要某種驗證規則時，一個簡單的使用場景就是，通過不同的type去顯示不同的錯誤信息。

const message =
      this.type === 'addFirst'
        ? '請輸入一級名稱'
        : this.type === 'addChild'
        ? '請輸入二級名稱'
        : this.type === 'addThree' && this.editChannelItem
        ? '請選擇三級名稱'
        : '請輸入三級名稱';
    const validatorHandle = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error(message));
      }
    };
    const newRule = [...this.formInfoRules.name, { validator: validatorHandle, trigger: 'blur' }];
    this.formInfoRules = Object.assign({}, this.formInfoRules, { name: newRule });

方式五 手動控制校驗狀態

• error錯誤信息
• validate-status驗證狀態。 success 驗證成功， error驗證失敗， validating驗證中，’'未驗證

這樣使用：

:error="validateFormState.error"
                :validate-status="validateFormState.state"
              >
            </el-form-item>
            
  validateFormState = {
    periodSendDateError: '',
    periodSendDateStatus: 'success',
  };
  在驗證成功或者失敗的時候去手動控制error和validate-status的值即可。