表单自定义校验获取的value为undefined(element ui)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
表单自定义校验
先看一段官网代码(取了一小部分):
<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 表单校验
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)