1、没有在el-form上指定model
2、el-form-item上的prop名称不对,应当与rules中的名称一致;
3、绑定的属性没有在data中声明;文章来源:https://www.toymoban.com/news/detail-514558.html
<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一定要相同,一个是数据绑定的值 另外一个是值的规则。
文章来源地址https://www.toymoban.com/news/detail-514558.html
到了这里,关于element-ui form表单校验 失败的原因的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!