el-form触发校验的过程可以分为几个步骤,下面我将详细解释这些步骤,并提供相应的代码片段作为佐证。 1. 确定需要触发表单校验的场景或条件 触发表单校验的场景通常包括用户提交表单、表单项失去焦点(blur)、表单项内容改变(change)等。例如,在用户点击提交按钮时,我们需要触发整个表单的校验。 2. 调用Element UI的el...
第一个el-form-item的el-input组件可以触发校验,但是第二个和第三个el-form-item的password-input是自定义组件,无法触发校验。 源码分析 源码地址:https://github.com/ElemeFE/element 在packages/form/src/form-item.vue中,可以找到addValidateEvents方法,该方法是用来给el-form-item的子组件绑定校验事件的,如下:...
1. 先封一个校验方法: 方法代码: formRulesValidate(fName){ return new Promise((resolve)=>{ this.$refs[fName].validate(valid=>{ if(valid) resolve(valid); }); }); }, 2. 保存,确定按钮点击得时候触发: saveVal(AgencyForm) { let formRulesOneRes = this.formRulesValidate('companyData'); ...
表单会主动触发新规则的校验,导致表单直接报红; 根据上述2个问题,解决方案如下: 二、项目配置 名称版本 element-plus ^2.8.8 vue ^3.5.12 typescript ~5.6.3 这里采用了 vue + ts 的开发方式,不喜欢 ts 的小伙伴可以根据项目自行删除不需要的代码~ 三、解决方案 整体代码是在 ElementPlus form 校验功能模块...
在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象(如错误信息一直提示不得为空)。 下面记录了常见的rules实现方式,以做参考。 1. 在el-form上绑定rules 这是常见的使用方式,即直接在data中定义rules,并在el-form中引用。
当动态切换校验规则时,可能会出现一些意想不到的状况, 比如: 问题1 如果触发了一个规则,表单报红后没有reset,再切换新规则,则原有规则的报红依旧显示的问题; 问题2 表单会主动触发新规则的校验,导致表单直接报红; 根据上述2个问题,解决方案如下: 二、项目配置 名称版本 element-plus ^2.8.8 vue ^3.5.12...
因为在我们自定义的组件内部没有触发el.form.blur和el.form.change这两个事件,所以想要使用 el-form, el-form-item 组件的表单校验功能,组件内部必须要用包裹它的el-form-item组件$emit el.form.blur和el.form.change。 实际应用如下 (blur 和 change 事件可根据需求选择使用) ...
在el-table的Action列表中,内嵌了el-popover代码,又在el-popover代码中,内嵌了el-form,当我触发表单save操作时,表单校验规则触发了,但校验提示却没有展示。 解决思路: 在讲解决思路之前,先介绍下el-popover,就拿当前场景来说,它会在表格的单元格中存在一个表单dom,当你触发el-popover的时候,它会移除当前单元格...
el-form组件是一个非常常用的表单验证组件,但是在使用过程中可能会遇到一些问题,比如在表单元素失去焦点后,未触发校验规则的情况。本文将探讨el-form组件失去焦点未触发校验规则的问题,并提供相应的解决方法。 一、问题描述 在使用el-form组件进行表单验证时,通常会设置一些校验规则,比如必填、电流新箱格式等。然而,在...
const isEmptyRule = (rule, value, callback) => { if (value == null || value == "") { callback(new Error('请上传图片')) // 一定要写 callBack() } else { callback() } }; 3. 手动触发 1 this.$refs.xXXForm.validateField('xxx');...