有关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属性的值应该与表单数据对象中的字段名相对应。

目录
相关文章
|
6月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
261 0
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3447 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
102 1
前端JS正则校验密码之3种实现方式
|
3月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
27 2
|
3月前
|
JavaScript
Antd——表单使用自定义正则进行校验
Antd——表单使用自定义正则进行校验
61 0
|
5月前
|
前端开发 数据安全/隐私保护
vue3表单参数校验+正则表达式
vue3表单参数校验+正则表达式
|
6月前
ElementUi配置自定义校验规则-校验IP和IP段
ElementUi配置自定义校验规则-校验IP和IP段
288 1
|
6月前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
504 0
|
6月前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
35 0