表单自定义校验获取的value为undefined(element ui)

表单自定义校验

先看一段官网代码(取了一小部分)：

<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
</el-form>  

 export default {
	data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
        } else {
           if (value < 18) {
             callback(new Error('必须年满18岁'));
           } else {
             callback();
           }
         }
      };
      return {
        ruleForm: {
          age: ''
        },
        rules: {
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
}

可能原因有一下几点：

1. 首先： el-from 里面要绑定modal和rules, :model=“ruleForm” :rules=“rules” ;
   
   然后：el-form-item 里面的 prop对应绑定一个rules里面的规则,prop=“age”；
   
   input输入框里面要绑定 v-model.number=“ruleForm.age”

2. ruleForm和rules里面对应的key一定要相同，一个是数据绑定的值 另外一个是值的规则。
   

3. 仔细检查下每个标签里面对应的值是否正确。

   详细的表单校验请访问 Element UI 官网：Element UI 表单校验