
vue+element ui表单提交校验问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
在进行表单校验时,明明输入了值,提交时却还是提示需要输入,问题可能出现在以下几个方面:
1、el-form-item中的prop字段需要和v-model中绑定的字段值一致,且还需要和rules中设置的校验值一致;
2、el-form中需要用model绑定,并且绑定的字段名称需要和后面一致;
3、rules中的校验规则需要注意,例如:如果是对input输入框设置校验,触发条件应设置为"blur";如果对select下拉框设置校验,触发条件应设置为"change"。如果有多个触发条件,则应该注意触发条件的顺序;
4、rules中的校验字段未在data中声明,如果字段未申明,那么就无法实现数据双向绑定的效果。
<el-form-item label="存货编号:" prop="mat_code">
<el-input v-model="formData['mat_code']" placeholder="存货编号" class="el_input">
<template slot="append">
<div class="el_input_text" @click="mateVisible = true">选择存货</div>
</template>
</el-input>
</el-form-item>
rules: {
mat_code: [
{ required: true, message: "请选择存货编号", trigger: "change" },
],
}
例如,如果想要对“存货编号”这个字段设置必输校验,只像上述代码这样写是不行的,还必须要在data中声明mat_code这个字段:
data(){
return{
rules:{
mat_code: [
{ required: true, message: "请选择存货编号", trigger: "change" },
],
}
formData:{
mat_code:"",//声明mat_code字段
}
}
}
这样的话就可以解决校验不起作用的问题啦!




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:7 个月前 )
c345bb45
11 个月前
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 11 个月前
更多推荐
所有评论(0)