vue+Elementui表單驗證基本使用

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

寫個簡單的例子：

1.基本用法：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>  
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ]
        }
      };
    }
  }
</script>

如果它不止這種簡單的校驗，可以通過validator另外再加方法：

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' },
　　　　　　　{ validator: this.otherRules, trigger: 'blur' }

          ]
        }
      };
    },
　　 methods(){　　　　
　　   otherRules(rule, val, callback) {
        if () {
        　callback(new Error(xxx'))
    　　 } else if () {
        　callback(new Error('xxxxx'))
     　　} else {
      　　callback()
   　　　}
  　　}
　　}
  }
</script>

 

 注：像長度這種校驗也可以放到validator對應的方法里，但是不能為空的校驗最好與它分開（不然有時候錯誤提示會是英文的形式）

 

2.規則校驗：

submit(){
  this.$refs.ruleFrom.validate(valid => {
    if(valid){
       //校驗通過后的操作
    }
  })
}

 有時候我們並不想整個表單一起校驗，只想校驗其中某一個：

submit(){
  this.$refs.ruleFrom.validateField('name',valid => {
    if(!valid){
       //校驗通過后的操作
    }
  })
}

 

3.清空校驗

（1）初始化的時候就出現了錯誤驗證。在表單初始賦值后，加如下代碼：（按道理講，此處應該加clearValidate(),但是並不起作用，，，根據自身情況定吧*_*）

this.$refs.ruleForm.resetFields()

 （2）如果有一個審批意見選項，同意的時候就進行表單驗證，不同意的時候就直接提交，在選擇審批意見時需要先清空表單驗證：

this.$refs.ruleForm.clearValidate();
this.$refs.ruleForm.clearValidate(['name']);//如果清除某個表單的校驗

//或者在el-form-item層加ref
<el-form-item ref="name">...</el-form-item>
this.$refs.name.clearValidate() 

總結一下二者的區別：

clearValidate() //僅清空校驗

resetFields() //不僅清空校驗，還重置字段值