有关elementUI el-form表单配置了校验规则但是反向校验问题

简介: 有关elementUI el-form表单配置了校验规则但是反向校验问题

先看一下我遇到的问题

这四项我配置了必填的规则

但是点击保存,即使我啥都没填也给通过了

反而我填了信息提示我信息未填写:

造成这种现象的原因也很简单,就是忘记给el-form加model属性了

<el-form  ref="ruleFormRef" :model="editStaff" :rules="rules" label-width="100px">

添加后就会恢复正常

总结:使用el-form组件的校验时需要配置

<el-form>的配置属性:

ref(指定组件唯一标识),model(表单数据对象),rules(校验规则对象)

<el-form-item>的配置属性:

prop(标识表单项的字段名)

prop属性的作用是在表单校验时,根据字段名来匹配需要校验的表单项。prop属性的值应该与表单数据对象中的字段名相对应。

目录
相关文章
|
23天前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
49 0
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3250 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
14天前
ElementUi配置自定义校验规则-校验IP和IP段
ElementUi配置自定义校验规则-校验IP和IP段
17 1
|
23天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
10 0
|
23天前
|
JSON 新能源 数据格式
uView test 规则校验
uView test 规则校验
51 0
|
4月前
|
SQL 测试技术 数据安全/隐私保护
密码组件校验规则该如何测试?
密码组件校验规则该如何测试?
|
9月前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
273 0
|
9月前
element表单组件的trigger表单验证逻辑规则
校验元素trigger属性值应该怎么选择?
214 0
vant常见的两种校验方式
vant常见的两种校验方式
541 0