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

相关文章
|
20天前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
46 0
|
1月前
|
JavaScript
在Vue中,如何编写自定义的验证规则?
在Vue中,如何编写自定义的验证规则?
22 1
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3248 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
11天前
ElementUi配置自定义校验规则-校验IP和IP段
ElementUi配置自定义校验规则-校验IP和IP段
17 1
|
1月前
有关elementUI el-form表单配置了校验规则但是反向校验问题
有关elementUI el-form表单配置了校验规则但是反向校验问题
20 2
|
6月前
|
数据安全/隐私保护
fastadmin中写接口是时Validate规则验证自定义如何用
fastadmin中写接口是时Validate规则验证自定义如何用
|
3月前
|
SQL 测试技术 数据安全/隐私保护
密码组件校验规则该如何测试?
密码组件校验规则该如何测试?
|
3月前
|
数据格式 Python
添加 自定义校验方法,让用户自定义校验规则
添加 自定义校验方法,让用户自定义校验规则
38 0
vant常见的两种校验方式
vant常见的两种校验方式
540 0
|
JavaScript
【分享】宜搭js代码验证组件校验结果(触发组件校验)
有时候需要手动触发校验,特别是自定义页面,校验通过才进行下一步 by 页一
951 1

相关实验场景

更多