ElementUI关于表单验证不起作用的问题解决_elementui表单校验规则不起作用

在项目中用到ElementUI的表单验证时，发现离开焦点后获取的输入框内容是空的，表示就是获取不到输入的字段。

以下是官网给出的表单验证的步骤和相关的代码。这是上半部分的。
script部分的代码如下：
重点来了：在仔细检查后发现，element-ui的表单校验规则中，el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。也就是我把formData里的属性名改成和rules里的属性名一致就可以了！！！但是，在官网中并没有说到这个名字需要一致的问题。

官网的使用规则是这样的：

在这贴上我部分的代码：

   <el-dialog title="提示" :visible.sync="modiDialog" width="80%" :before-close="handleClose" >
     <el-form :model="ruleForm" label-width="100px" :rules="rules">
       <el-form-item label="用户姓名" prop="modiName">
         <el-input placeholder="请输入姓名" v-model="ruleForm.modiName"></el-input>
       </el-form-item>
         <el-form-item label="密码" prop="modiPassword">
           <el-input placeholder="请输入密码" v-model="ruleForm.modiPassword" show-password></el-input>
         </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-radio-group v-model="ruleForm.sex">
           <el-radio label="男"></el-radio>
           <el-radio label="女"></el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="modiDialog = false">取 消</el-button>
       <el-button type="primary" @click="modiDialog = false">确 定</el-button>
     </span>
   </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

script部分的：

export default {
  data() {
    return {
      ruleForm: {
        // 定义修改的数据
        modiName : '',
        modiPassword : '',
        sex: '',
      },
      tableData: [],
      delName: '',
      modiDialog : false,
      //表单验证
      rules:{
        modiName:[
           { required: true, message: '请输入姓名', trigger: 'blur' },
           { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        modiPassword:[
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        sex: [
           { required: true, message: '请选择性别', trigger: 'change' }
        ],
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

以上，虽然问题不大，但是找了挺久的bug就当记录一下，下次就知道避免这个坑了。