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() //不仅清空校验，还重置字段值