element表单组件的trigger表单验证逻辑规则

简介: 校验元素trigger属性值应该怎么选择?

校验元素trigger属性值应该怎么选择?

一、trigger: 'blur'

blur失去焦点,比如输入框里。校验文本框是否为空。

8e2767d11e17422ea39916314377e749.png

cf44c4190a844226a619c7f871e510ba.png

二、trigger:'change'

change数据改变,用于需要手动选择的东西。

1c728b3c0a514708b8d4875fb6cc6e09.png

3cd7993738a745c5a3b0fe2ca7c73f59.png


三、prop属性

记得要配合prop属性进行规则验证,如果表单中没有prop属性,那么规则验证也不会出现。

目录
相关文章
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3283 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
6天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
12 0
|
6天前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
18 0
|
7月前
|
JavaScript
Element-Ui表单移除校验clearValidate和resetFields
添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误: 那么,你只需要加上这段话即可 this.$nextTick(()=>{ this.$refs.addArray.resetFields(); }) 再此,我顺便说一下resetFields和clearValidate的区别: this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于.
164 0
Element-Ui表单移除校验clearValidate和resetFields
|
9月前
|
JavaScript
Vue中如何使用v-model双向数据绑定select、checked等多种表单元素
Vue中如何使用v-model双向数据绑定select、checked等多种表单元素
197 0
|
9月前
|
JavaScript
VUE element组件输入框校验
VUE element组件输入框校验
|
9月前
element-ui自定义表单验证
element-ui自定义表单验证
39 0
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验
957 0
|
11月前
element表单嵌套检验+动态添加
element表单嵌套检验+动态添加
213 0
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))