element-ui表单验证的trigger

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量3.4w 收藏 6
点赞数 2
分类专栏： UI框架 element-ui 文章标签： element-ui表单验证的trigger validateField
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamFJ/article/details/88686774
版权

看element-ui给的例子trigger可以取'change'，'blur'等值，但是并不是所有的验证项都可以被这样触发，如何主动控制触发验证呢？

可以使用validateField。看element-ui自定义验证里面就有一个例子，在“密码”不为空的时候去验证“确认密码”字段：

所以可以在主动验证的地方调用this.refs[formName].validateField('验证字段名')

参考：https://segmentfault.com/q/1010000013586664

jojo付啾啾
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
详解element-ui中表单验证的三种方式
10-16
主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ElementUI表单校验trigger设为change无效问题
qq_17189095的博客
06-27 1737
如果封装的自定义表单组件，内部存在el-form，所有的表单元素都在form内部，然后当整个form的数据变化时，this.$emit('input', value)，这种情况不会触发表单的校验的，因为当前组件作为一个整体，被嵌入在el-form-item中，它并不知道你的数据变化了。以el-input为例，在源码中可以看到，在watch中监听value变化，并通知上层数据变了。
Element-UI详解
最新发布
科技追踪者的专栏
05-22 2055
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
Vue系列之—Element UI 表单自定义效验规则
zhou139856的博客
07-03 1万+
介绍Vue项目中表单验证规则使用和常见验证方法
Element-UI中的表单验证
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
element-ui的表单正则校验
weixin_66375317的博客
05-25 1万+
element-ui的表单正则校验
ElementUI 表单 rules 规则
普罗旺斯
08-23 1万+
function验证器，可以为指定字段自定义验证函数：function(rule, value, callback, source, options)rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称value：当前校验字段的值callback：校验结束的回调函数，不管判定成功或者失败，必须调用。
Element-UI 表单验证规则rules 配置参数说明
Future1994的博客
06-21 2455
rules: { name: [ /*required 是否必填 trigeer 触发检查的方式 blur 失去焦点时检查 change 值发生改变时触发*/ { required: true, message: '请输入活动名称', trigger: 'blur' }, /*min 最小值 max 最大值 注意: type默认为string min和max则为最小长度和最大长度 当需要设置成数字的最小值和最大值时 type:'nu.
element中的rules验证规则
qq_42809973的博客
12-21 1万+
:rules="[ {required: true, message: '必填项', trigger: 'change'}, {type: 'number', message: '必须为数字值', trigger: 'blur'}, {pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'} ]"  ...
ElementUI表单校验
qq_57420582的博客
09-14 3521
ElementUI表单校验
element-ui 表单验证触发方式 trigger :‘change‘ 和 ‘blur’ 的区别
努力努力再努力的博客
08-10 5680
element-ui 表单验证触发方式 trigger :‘change’ 和 ‘blur’ 的区别 trigger :‘change’ change 数据改变触发 比如 ： 需要 手动选择的东西，用 change trigger : ‘blur’ blur 失去焦点 比如 ： 输入框里，验证文本框是否为空 没有任何输入的时候，不会触发 change ， 但一定会触发 blur 事件 ...
vue 组件 not defined_vue基础知识学习笔记（三）
weixin_39840733的博客
11-30 785
对element-ui 中 form学习form表单中有自带的验证规则注意不同的框对应不同的trugger值 rules: { // 对普通输入框不能 为空输入限制输入个数 name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message:...
el-form表单验证的trigger类型 非el的输入组件，值变化时不会触发el-from-item的重新校验，需要手动触发el.form.change事件 校验
祖先生的博客
09-23 1万+
//第一种 { required: true, message: '请输入字典项', trigger: 'blur' }, //第二种 { required: true, message: '请输入字典项', trigger: 'change' }, //第三种 { pattern: /^[A-Za-z0-9_]+$/, message: '字典项只能由 大小写字母、数字、下划线组成', trigger: ['blur', 'change'] } trigger类型为blur的功能是文
element ui 表单验证触发方式：trigger: ‘change‘和trigger: ‘blur‘区别
weixin_42594143的博客
03-08 7321
trigger: ‘change’:数据改变时触发 trigger: ‘blur’:失去焦点时触发,如下图 没有进行任何输入时，不会触发change，但一定会触发blur事件
vue2.0+elementUI 表单提交验证
热门推荐
weixin_42507803的博客
08-21 4万+
HTML 页面 1：首先在form里绑定：model    :rules     res   在item标签里用 prop=" 传指定义的名字" 来验证标签 <el-form label-width="140px" :model="staffinfoForm" :rules="editFormRules" ref="staffinfoForm">              
element-ui的form表单校验
minnyYu的博客
12-31 4546
element-ui表单校验步骤
element rules 校验
wadeltf的博客
07-29 2万+
1、简单的校验，之间通过rules 校验 :rules="{required: true, message: '执行时间不能为空', trigger: 'blur'}" 这个是失去焦点的时候，校验是否有值，如果没有会之间有校验提示 2、通过定义方法校验 :rules="validateTaskName" 这个校验需要定义一个变量，即在data里面return里定义变量：validat...
element-ui表单校验数组
04-09
Element-UI是一套基于Vue.js的UI组件库，提供了丰富的组件和功能，其中包括表单校验。在Element-UI中，可以通过校验规则数组来对表单进行校验。 校验规则数组是一个包含多个校验规则对象的数组，每个校验规则对象包含了对应表单项的校验规则。每个校验规则对象通常包含以下属性： 1. `required`：是否必填，可以是布尔值或者一个函数，函数返回布尔值表示是否必填。 2. `validator`：自定义校验函数，用于对表单项进行自定义校验。 3. `trigger`：触发校验的事件，默认为`blur`，即失去焦点时触发校验。 下面是一个示例的校验规则数组： ```javascript rules: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 12, message: '用户名长度在6到12个字符之间', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 12, message: '密码长度在6到12个字符之间', trigger: 'blur' }, ] ``` 以上示例中，定义了两个表单项的校验规则：用户名和密码。用户名和密码都是必填项，且长度必须在6到12个字符之间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值