ElementUI中自定义校验规则的使用

简介: ElementUI中自定义校验规则的使用

注:最基础使用需要三步,完成后可保证最基本的校验效果。

1.基础使用


基本的三步:

1.定义校验规则

2.属性配置

3.手动兜底校验

第一步,位置data里面的return下:

image.png

image.png

第二步:属性配置

image.png

第三步:手动兜底校验

image.png

image.png

小结:

做完这些,就能出最基本的效果了,下面是设置自定义校验规则。

2.自定义校验分两步:


第一步:在自定义规则里面准备配置

image.png

第二步:自己写逻辑,注意位置,官方推荐在data 和 return之间写

image.png

3. 最后,贴一段自定义校验函数,并进行分析:


这段代码的实际场景是:code是唯一的,不能重复,但是编辑状态下可以和自己一样。数据是数组,里面是对象

image.png

4.总结:先掌握自定义校验规则的使用方法,再按需求加自己的规则。可以去官网查看一些更细致的规则,放出一些常用的规则以备不时之需。


required: true, 必填吗? true必填,false反之
message: '请输入活动名称', 提示文本
trigger: 'blur' 失去焦点触发校验
min: 3, max: 5, message: '长度在 3 到 5 个字符',

image.png

image.png

image.png

image.png

相关文章
|
6月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
261 0
|
6月前
|
JavaScript
在Vue中,如何编写自定义的验证规则?
在Vue中,如何编写自定义的验证规则?
104 1
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3447 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
3月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
27 2
|
3月前
|
JavaScript
Antd——表单使用自定义正则进行校验
Antd——表单使用自定义正则进行校验
61 0
|
6月前
ElementUi配置自定义校验规则-校验IP和IP段
ElementUi配置自定义校验规则-校验IP和IP段
288 1
|
数据安全/隐私保护
fastadmin中写接口是时Validate规则验证自定义如何用
fastadmin中写接口是时Validate规则验证自定义如何用
222 0
|
6月前
有关elementUI el-form表单配置了校验规则但是反向校验问题
有关elementUI el-form表单配置了校验规则但是反向校验问题
84 2
|
6月前
|
JSON 新能源 数据格式
uView test 规则校验
uView test 规则校验
160 0
|
6月前
|
SQL 测试技术 数据安全/隐私保护
密码组件校验规则该如何测试?
密码组件校验规则该如何测试?