elementUI中from表单验证不起作用的几种常见错误

最近在使用element写表单的校验，但是经常不起作用，总结一下大概经常会出现下面的几种错误。所以在这里记录一下

首先要特别注意检查一下自己是不是有什么单词拼错了，如required写成require等等。

首先要特别注意检查一下自己是不是有什么单词拼错了，如required写成require等等。

首先要特别注意检查一下自己是不是有什么单词拼错了，如required写成require等等。

• el-from上要使用:model不要使用v-model
• el-from-item是否有加prop，并确定prop是不是和编写的规则相同
• from绑定的表单是否有初始数据

  //表单邦迪昂的是addFrom
  <el-form label-width="120px" ref="menuFrom" :model="dialogOpt.addFrom" size="small"
                    :rules="dialogOpt.menuFromRule">
  // 其中的一个元素是menuType
  <el-form-item prop="menuType" v-if="!dialogOpt.addFrom.id" label="类型:">
                   <el-select :model="dialogOpt.addFrom.menuType" name="menuType">
                       <el-option v-for="item in dialogOpt.menuTypeList"
                                  v-if="item.value>dialogOpt.rowData.menuType"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"></el-option>
                   </el-select>
               </el-form-item>
   // 那么就要确认下addFrom中的menuType是不是有初始的数据，没有初始数据就不会进行校验
                 addFrom: {
                       menuType: ''“,
                   },
  

• 判断一个是不是有写校验的方法，并且检查一下ref是不是正确

// 检查一下menuFrom是不是和表单的ref一致
this.$refs.menuFrom.validate(valid => {
                    if (valid) {
                       // 验证成功
                    }else{
                       //验证失败
                    }