element-ui form表单校验 失败的原因_elementu校验常见得错误

1、没有在el-form上指定model
2、el-form-item上的prop名称不对，应当与rules中的名称一致；
3、绑定的属性没有在data中声明；

<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>  

<script>
 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' }
          ]
        }
      };
}
</script>
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
28
29
30
31
32
33
34
35

4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同，一个是数据绑定的值 另外一个是值的规则。