VUE el-form表单中rules校验方法实现

在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。
下面记录了常见的rules实现方式，以做参考。

1. 在el-form上绑定rules

这是常见的使用方式，即直接在data中定义rules，并在el-form中引用。
注意：prop与rules中的字段一致。
举例如下：

<template>
......
  <el-form ref="dataForm" :rules="rules" :model="formData">
    <el-form-item label='名称' prop="name">
      <el-input v-model="formData.name"/>
    </el-form-item>
    <el-form-item label='班级' prop="class">
      <el-input v-model="formData.class"/>
    </el-form-item>
    ......
  </el-form>
......
</template>
<script>
......
  export default {
    data(){
      return {
        ......
        formData: {
          name: null,
          class: null
        },
        rules:{
          name:[{required: true, message: '输入不得为空', trigger: ['blur', 'change']}],
          class:[{required: true, message: '输入不得为空', trigger: ['blur', 'change']}],
        },
     }
  }
......
}
......
</script>

2. 在el-form-item上绑定rules

该方法中rules直接绑定在el-form-item上而不是其他字段上（如el-input），且不需要在data中定义rules。
举例如下：

<template>
......
  <el-form ref="dataForm" :rules="rules" :model="formData">
    <el-form-item label='名称' 
                  prop="name" 
                  :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']} ">
      <el-input v-model="formData.name"/>
    </el-form-item>
    <el-form-item label='班级' 
                  prop="class" 
                  :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']} ">
      <el-input v-model="formData.class"/>
    </el-form-item>
......
  </el-form>
......
</template>
export default {
  data(){
    return {
    ......
    formData: {
      name: null,
      class: null
    },
  }
......
}

3. 循环调用el-form-item，rules校验

在循环调用的el-form-item中绑定rules规则，重要的是能够用prop把字段进行区分，rules使用中出现的问题大部分由此引起。
举例如下：

<template>
......
  <el-form ref="dataForm" :rules="rules" :model="formData">
    <el-form-item label='班级' 
                  prop="class" 
                  :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']}">
      <el-input v-model="formData.class"/>
    </el-form-item>
    <div v-for=”(item,index) in formData.person" :key="index">
      <el-form-item label='名称' 
                    :prop="'name.'+index+'.name'" 
                    :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']}">
         <el-input v-model="item.name"/>
      </el-form-item>
  ......
  </el-form>
......
</template>
export default {
  data(){
    return {
      ......
      formData: {
        person: [{"name":"liming"},{"name":"wangyu"}],
        class: null
      },
    }
  }
......
}

4. 循环中采用组件嵌套的方式进行rules校验

同3）一样，循环重要的是prop把字段进行区分。
举例如下：

父组件实现

<template>
......
  <el-form ref="dataForm" :rules="rules" :model="formData">
    <el-form-item label='班级' 
                  prop="class" 
                  :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']}">
      <el-input v-model="formData.class"/>
    </el-form-item>
    <div v-for=”(item,index) in formData.person" :key="index">
      <child-component :index="index"/>
  </el-form>
  ......
</template>
export default {
  data(){
    return {
      ......
      formData: {
      person: [{"name":"liming"},{"name":"wangyu"}],
      class: null
      },
    }
  }
......
}

子组件child-component

<el-form-item label='名称' 
              :prop="'name.'+index+'.name'" 
              :rules="{required: true, message: '输入不得为空', trigger: ['blur', 'change']}">
    <el-input v-model="item.name"/>
</el-form-item>
props:{
  index: null,
  name:null,
}