el-form 清除表单验证结果

总是遇到的一个表单验证问题，怕下次忘了，在这里记录一下

问题

编辑页面时总是在刚进入页面显示触发表单验证结果，由于此时并未提交，影响用户体验感
效果图如下：
代码实现：

<template><el-formref="dateForm":`rules`="`rules`":model="workorderDetail"label-position="right"label-width="128px"class="form"size="small"><div class="info-box"><el-form-item label="工单类型:" prop="orderType"><el-selectv-model="workorderDetail.orderType"clearableclass="editinput"size="small"placeholder="请选择":disabled="initState !== 0"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item><el-form-item label="工单完成定义:" prop="actualQuantity"><el-inputv-model="workorderDetail.actualQuantity"placeholder="请输入内容"class="editinput"clearable:disabled="initState !== 0"/></el-form-item><el-form-item label="优先级:" prop="priority"><el-inputv-model="workorderDetail.priority"placeholder="请输入内容"class="editinput"clearable:disabled="initState !== 0"/></el-form-item><el-form-item label="备注:" prop="remark"><el-inputv-model="workorderDetail.remark"placeholder="请输入内容"class="editinput"clearable:disabled="initState !== 0"/></el-form-item></div></el-form>
</template>
import { workorderData } from "@/api/workorder-model";
export default {name: "",components: {},data() {return {`rules`: {orderType: [{required: true,message: "该参数是必填项",trigger: ["blur", "change"],},],actualQuantity: rule_number("请输入数字", ["change", "blur"]),priority: rule_number("请输入正整数", ["change", "blur"]),},workorderDetail: {remark: "",orderType: "",priority: "",actualQuantity: "",},};},mounted() {this.getworkorderData(this.$route.params.id);},methods: {getworkorderData(id) {workorderData(id).then((res) => {if (res.data.code === "200") {// 将查询结果赋值到表单this.workorderDetail = res.data.data;}});},},
};

导致这个问题的原因

由于在 rules 验证规则内触发条件（trigger）添加了 change ，会在值改变的时候触发验证规则，所以在页面进入对表单重新赋值导致值改变，触发了 change 事件，从而触发验证规则

解决办法（两种办法）

1、将验证规则 rules 修改为只在 blur 条件下触发，去掉触发条件（trigger）里的 change ，这样就避免了赋值时触发 change 事件，导致验证表单。

如图所示：

`rules`: {orderType: [{required: true,message: "该参数是必填项",trigger: ["blur"],},],actualQuantity: rule_number("请输入数字", ["blur"]),priority: rule_number("请输入正整数", ["blur"]),},

2、在不改变 rules 的情况下，在对表单进行赋值之后使用 clearValidate 方法移除校验结果，此处应注意 clearValidate 是对 DOM 的操作，需要在 nextTick 内实现，以避免不生效的问题

如图所示：

methods: {getworkorderData(id) {workorderData(id).then((res) => {if (res.data.code === "200") {// 将查询结果赋值到表单this.workorderDetail = res.data.data;//  使用clearValidate移除表单验证结果this.$nextTick(() => {this.$refs["dateForm"].clearValidate();});}});},},

最终效果

以上两种方法都可实现以下效果：进入编辑页面就不会因为触发验证规则一开始就显示表单验证结果

el-form 清除表单验证结果相关推荐

vue iview表单验证,清除表单验证/去掉表单验证的*号
前言: 最近写isop项目遇到的问题, 表单验证,默认的iview写法加上prop,在data里面定义,input前面就会有个红色的号,表示这里必填加了验证,测试觉得这个号碍眼,让我去掉,第一次遇到这 ...
没有form的表单验证_PHP动态生成表单，内置17种常用组件并且支持表单验证！
FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单.还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件 github | 文档环境需求 ...
element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。
效果图: 使用Element-UI的自定义验证实现. 这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在, ...
php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
ExtJs Form 表单验证
extjs表单验证 //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext ...

el-form 清除表单验证结果

el-form 清除表单验证结果

问题

导致这个问题的原因

解决办法（两种办法）

最终效果

el-form 清除表单验证结果相关推荐

最新文章

热门文章