iView表单验证trigger多种触发方式:

于 2023-06-12 23:58:45 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 业务功能 笔记 iView 文章标签： 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68849671/article/details/131179138
版权
业务功能 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
笔记
2 篇文章 0 订阅
订阅专栏
iView
1 篇文章 0 订阅
订阅专栏

场景:

无论是input框类型还是select下拉选择框类型,trigger验证可以同时加两个,这样子的做法可以为了每次去看是什么类型的表单框类型了

语法:

单个时:

trigger:'change'

多个时:

trigger:'blur,change'

 注意ivew的trigger验证为多个写法时区别于element-ui中的多个写法

element-ui中的写法为:

trigger: ['blur', 'change']

 

清蒸大闸谢先森
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中trigger说明
weixin_40873693的博客
04-08 1万+
trigger: "blur": 失去焦点时触发 phoneNum: [ {required: true, message: '请输入手机号码', trigger: 'blur'}, { min: 13, max: 13, message: "长度13个字符", trigger: "blur" } ] 当输入框失去焦点时会提示： trigger: "change": 数据改变时触发， phoneNum: [
浅谈关于iview表单验证的问题
10-17
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview - 自定义表单验证
idomyway的博客
07-22 862
自定义表单验证代码 export default { data () { const validateImage = (rule, value, callback) => { if (value.barImage === '') { callback(new Error('验证错误')) } else if (value.split('...
iview同时验证多个表单问题总结
12-29
iview验证一个表单问题： 在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :rules=ruleValidate :label-width=120></Form> //点击确认按钮 <Button type='primary' @click='addAreaOK(addAreaForm)'>确定</Button> addAreaOK(name){ this.$refs[name].valida
根据配置动态生成有验证的表单
08-10
该组件使用了iview框架，以及iview中form表单引用的组件async-validator对表单进行验证
vue在使用饿了么中trigger、el-dialog的用法、校验时所遇到的问题。
m0_73266749的博客
12-13 1552
vue在使用饿了么中trigger、el-dialog的用法、校验时所遇到的问题。
vue3 trigger
weixin_35749796的博客
01-09 472
Vue 3 中的 trigger 函数是用来触发一个自定义事件的。它可以在一个 Vue 组件内部使用，也可以在组件外部使用。 使用方式： this.$emit('customEventName', eventData) ...
vue+iview 自定义侧边栏（Sider）触发器（trigger）
1H1R1M的博客
03-31 9226
#1），记录原因描述： 想要修改Sider的样式（背景颜色），通过给Sider设置了新的class后，背景颜色虽然修改了，但是低端的触发器样式仍然是Menu组件的”Dark“主题样式。 查看官方文档知道，Sider 可以设置hide-trigger属性来隐藏默认触发器。 #2），模板： 模板大致是iView官方文档中的“Layout布局”中的其中一个。截图如下，代码见官网： #3），修...
vue 自动触发点击事件
u011200562的博客
01-28 1万+
需要，点击左边的菜单，顶部菜单相应改变，但是都需要点击事件，页面进来时，默认触发点击事件 方法一，vue自定义指令 directives:{ trigger:{ inserted(el, binging){ console.log(el.id) el.id == 'nav0' ? el.click() : null // 只点击第一个，id是在循环中手动添加的 // $(el).trigger('click') // 所有都触.
iview表单验证trigger:'change,blur'
weixin_30527551的博客
08-19 2747
今天发现,如果设置select的trigger:'blur'就算选择之后还是边框是红色的,之后查了一下iview的文档,也没有找到准确的蚊子描述,只看到form那个组件其中有一个例子,大概是select会对应change,input对应blur还有其他checkbox的....,因为判断的有点乱,一个个看很麻烦,后来搜了一下 原博客这个方法还不错,直接将trigge:'blur,cha...
VUE初始--学习笔记
qq_55113068的博客
01-18 1758
记录一点杂七杂八的学习笔记，初学时写的 ，暂时就不分类了。杂七杂八往这堆堆。其实也能算是js笔记。 1.【props】： 道具，用来接收父组件中的数据，其值为数组（即从父元素传给子元素） 举例子：props:[‘name’] //接收父组件中的name 注意，props是从上到下的单向数据传递，反之则不行 【注意-驼峰命名法】使用驼峰命名法时，要记得转化字符间的-。 简单例子：isName会自动转换成is-name，如果直接使用isName，会报错显示未定义。 在这个案例中的例子： props:[‘s.
vue3源码之响应式原理
newway007的博客
04-22 230
reactive的函数实现如下: function reactive (target) { // 如果尝试把一个 readonly proxy 变成响应式，直接返回这个 readonly proxy if (target && target.__v_isReadonly) { return target } return createReactiveObject(target, false, mutableHandlers, mutableColl
Element ui 表单验证触发方式：trigger的两种选项
pHoSpHeneS80的博客
12-06 3660
Element ui 表单验证触发方式：trigger
vue中iview组件实现表单数据的动态校验
aaa123aaasqw的博客
05-11 1309
【代码】vue中iview组件实现表单数据的动态校验。
Iview 表单验证的规则总结
ddwddw4的博客
04-11 4260
参考文档：https://github.com/yiminghe/async-validator 1. 支持的基本类型 <FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',m...
iview表单校验必填项required时显示xxx is required，或者trigger验证不刷新问题
最新发布
george_ye的博客
06-12 1198
使用iview的form组件，表单项为必填项时遇到的问题
表单验证 trigger
WHQNever_Stop的博客
06-22 4843
简单来说就是设置trigger就会自动验证表单填写是不是符合条件的，而trigger就控制什么时候验证。1.trigger:"blur" 这是当失去焦点时验证。 填写密码、用户名、手机号、邮箱时可以使用blur2.trigger:"change" 这是当值改变了时验证。 用单选框、复选框的时候可以使用biur...
Vue进阶（幺玖零）：表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别
热门推荐
IT全栈 华强工作室
04-22 3万+
前言 利用elementUI实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形。 通过去除校验规则中相应元素的trigger:'blur'属性，可解决以上问题。 至于表单校验时，校验元素trigger属性值的选择，需要继续深究。若不设置trigger属性，该属性是否有默认值？ 表单验证时，trigger:‘blur’ OR trigger:‘change’ OR 不设置？ 对el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证。 下拉框（el-selec
04-Vue的事件机制
东逝水
03-27 311
事件机制无非就是一个添加监听和触发的过程。所以可想而知应该有on方法和trigger方法，这是jQuery的名字。Vue也有类似的方法，在core/instance/events.js中。 有以下四个方法，在Vue.prototype上： $on $once $off $emit 总体上这段代码没有太多可说的。要知道一点，Vue实例上的事件监听函数都是保存在这个实例的_events上的。每个类...
iview表单验证trigger不生效
05-24
可能是因为你没有在表单项中设置 `prop` 属性，或者设置了错误的 `prop` 属性。`prop` 属性用于唯一标识表单项，从而触发表单验证。 另外，如果你使用了 `rules` 属性来设置表单项的验证规则，可以考虑使用 `validate` 方法触发表单验证，而不是 `trigger` 方法。`validate` 方法可以同时验证整个表单，而 `trigger` 方法只能验证当前表单项。 以下是一个示例代码： ``` <template> <Form :model="form" :rules="rules" ref="formRef"> <FormItem label="用户名" prop="username"> <Input v-model="form.username" /> </FormItem> <FormItem label="密码" prop="password"> <Input type="password" v-model="form.password" /> </FormItem> <FormItem> <Button type="primary" @click="submitForm">提交</Button> </FormItem> </Form> </template> <script> import { Form, FormItem, Input, Button } from 'iview' export default { components: { Form, FormItem, Input, Button }, data () { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm () { this.$refs.formRef.validate(valid => { if (valid) { // 表单验证通过，可以进行提交操作 console.log('表单验证通过') } else { // 表单验证不通过，需要给出错误提示 console.log('表单验证不通过') } }) } } } </script> ``` 在上面的示例代码中，我们在表单项中设置了 `prop` 属性，并且在 `rules` 属性中设置了验证规则。在提交表单时，我们使用 `validate` 方法触发表单验证，并根据验证结果进行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值