Element UI 的三種校驗模式

element ui form表單 的校驗規則

• 單一校驗
  • 在form表單上面 添加告訴我們需要添加校驗

    :rules="rules"
    

  • 編寫規則

    rules: {
        username: [
            /* 
                element ui 的校驗
                    required    必填
                    message     校驗失敗的消息提醒
                    trigger     觸發的校驗的事件
                    type        校驗的類型
                    min         校驗的時候,輸入的最小長度
                    max         校驗的時候,輸入的最大長度
            */
            { required: true, message: '請輸入賬號', trigger: 'blur' },
            { min: 3, max: 10, message: '賬號的長度在 3 到 10 個字符', trigger: 'change' }
        ]
    }
    

  • 校驗的字段
    在form-item的上填寫校驗的字段 prop

    <el-form-item prop="username">
        <el-input ></el-input>
    </el-form-item>
    

• 統一提交的校驗
  • 在form表單上填寫

  :model="userInfo" ref="userInfo"
  

  • 提交校驗

  this.$refs.userInfo.validate(async (valid) => {
      if (valid) {
          //表單校驗成功走這里面
      } else {
          //表單校驗失敗走着里面
          return false;
      }
  });
  

• 自定義校驗規則
  • 知道那一個字段是進行自定義校驗規則

  prop="configPassword"
  

  • 編寫自定義校驗規則(校驗器),return當中的rules里面

  configPassword: [
      { validator: validatePass2, trigger: 'blur' }
  ]
  

  • 進行自定義校驗 在data當中,return外面

  var validatePass2 = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('請再次輸入密碼'));
      } else if (value !== this.userInfo.password) {
          callback(new Error('兩次輸入密碼不一致!'));
      } else {
          callback();
      }
  };