element-ui form表单校验 失败的原因

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>

4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。
element-ui form表单校验 失败的原因_第1张图片

你可能感兴趣的:(vue.js,elementui,javascript)