表单自定义校验获取的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>&l
·
表单自定义校验
先看一段官网代码(取了一小部分):
<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' }
]
}
};
}
可能原因有一下几点:
-
首先: el-from 里面要绑定modal和rules, :model=“ruleForm” :rules=“rules” ;
然后:el-form-item 里面的 prop对应绑定一个rules里面的规则,prop=“age”;
input输入框里面要绑定 v-model.number=“ruleForm.age” -
ruleForm和rules里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。
-
仔细检查下每个标签里面对应的值是否正确。
详细的表单校验请访问 Element UI 官网:Element UI 表单校验
更多推荐
已为社区贡献5条内容
所有评论(0)