主动触发表单校验

1.场景介绍

在供应商表单自定义一个按钮,调用表单校验接口,对表单进行校验,表单需通过校验后才能保存,表单校验不通过则无法保存。

#2.效果展示

在供应商表单中,供应商名称和状态为必填。

点击自定义“校验并保存”按钮,会对表单中的必填项进行校验,校验通过,保存成功,校验不通过则无法保存。效果图如下:

#3.实现思路

在供应商表单中添加自定义按钮,在按钮的代码块中调用表单校验接口,对表单进行校验。

#4.操作步骤

在"第一个表单"的基础上,进行如下操作实现效果。

#4.1 添加自定义按钮

在供应商低开表单-表单设置-按钮设置中,删除保存并继续按钮,保存按钮,添加自定义按钮。

#4.2 编辑自定义按钮

对自定义按钮进行编辑,名称改为“校验并保存”,添加动作代码块,调用表单校验接口。

示例代码如下:

//触发低开表单校验
   this.Api.getFormItem('pmForm', '').validate((valid) => {  
        if (valid) {  
          this.$message('表单校验通过');  
          // 表单校验成功,调用保存表单的方法  
          this.Api.submitForm();  
        } else {  
          this.$message('表单校验失败,请检查表单信息');  
        }  
      });  

更多请参见EOS Low-Code Platform 8

### Element UI el-tabs 切换触发表单校验解决方案 为了确保 `el-tabs` 的标签页切换时能够正确触发表单校验,可以采用如下方式: 在 `el-tabs` 组件上绑定 `before-leave` 属性来指定一个函数用于决定是否允许切换。此函数应当返回布尔值或 Promise 对象以控制切换行为。当需要进行表单校验时,在该回调内执行校验逻辑,并依据其结果决定是否继续切换。 对于包含嵌套子组件中的表单情况,则可以在父级定义统一的方法来进行验证操作。通过 `$refs` 访问到对应的子组件实例进而调用其中暴露出来的提交/校验接口完成整个流程[^4]。 下面是一个具体的例子展示如何实现这一功能: ```html <template> <div id="app"> <!-- 使用 before-leave 来拦截 tab 切换 --> <el-tabs v-model="activeName" @tab-click="handleTabClick" :before-leave="handleBeforeLeave"> <el-tab-pane label="基本信息" name="first">基本信息</el-tab-pane> <el-tab-pane label="配置管理" name="second"> <base-form ref="baseForm"></base-form> <!-- 子组件 BaseForm.vue --> </el-tab-pane> <el-tab-pane label="角色权限" name="third">角色权限</el-tab-pane> </el-tabs> </div> </template> <script> import BaseForm from './components/BaseForm'; export default { components: {BaseForm}, data () { return { activeName: 'first' }; }, methods: { handleTabClick(tab) {}, // 处理 Tab 切换前的操作 async handleBeforeLeave(activeName, oldActiveName){ if(oldActiveName === "second"){ const formRef = this.$refs['baseForm']; try{ await formRef.submitForm(); console.log('表单校验成功'); return true; } catch(error){ console.error('表单校验失败', error); return false; } } return true; } } }; </script> ``` 在此示例中,每当尝试离开名为 `"second"` 的选项卡时都会先运行 `submitForm()` 方法对表单数据做有效性检查;只有在校验无误的情况下才会真正发生页面间的转换动作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值