element ui 手动清除表单效验提示语

最新推荐文章于 2024-07-05 20:42:31 发布
原创 最新推荐文章于 2024-07-05 20:42:31 发布 · 3.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Element UI框架中如何实现表单类型动态切换，并在切换时清除原有表单验证，确保用户体验流畅。通过修改表单类型并调用clearValidate方法，可以有效地重置表单状态。 
<el-form ref="loginForm" :model="user" :rules="loginRules"  size="large"></el-form>
changeType(){
    this.type = this.type == 2?1:2;
    this.clearVail();
    // this.user.name = '';
    // this.user.password = '';
},
//清除验证
clearVail(){
    this.$refs['loginForm'].clearValidate();
},
element-ui和vue表单(对话框)验证提示语(残留)清除操作
01-18
如果一个页面有多个按钮打开相同的element-ui的Dialog对话框，那么如果第一个点击”顺序”按钮出现红色验证提示语后， 再点击“取消”，或者点击页面空白处此对话框消失，而后再点击同一个“顺序”按钮亦或别的...
vue.js+element 默认提示中英文操作
01-18
补充知识：element-ui组价中表单的验证提示显示后台的提示信息及自定义提示 我在做这个的时候一个是分给我的那个页面 是有两个接口的，所以提示信息就是根据接口的response.success 提示 写一个提示语“XX已存在”...
使用Element下拉选项组件——清除提示语
qq_61437464的博客
09-07 986
当我们使用规则去判断当前选项是否为空，如果为空会使用“提示语”提醒用户该选项是必填项，当用户填完选项之后发现“提示语”还存在，虽然不影响后面的操作，但是给用户的体验感并不是很好，因此，我们需要做的时，当用户填完信息之后的“提示语”也要随着消失。
element-ui的表单验证如何清除校验提示语（账号密码和手机验证码两种登录方式）
weixin_45393280的博客
04-13 2852
今天做vue后台管理项目的时候，在表单验证环节出了一个bug。这个项目原来是只有一种登录方式的，输入账号和密码即可登录。后来老板又要求增加一个用手机号码获取验证码登录。 做好了之后就出现了一个问题，当不输入手机号的时候，下方会有警示，提示你没有输入手机号 然后这时点击下方按钮，切换到账号密码登录时，这个警示仍然存在。 如图 直接说解决方法 <!-- 账号密码登录 --> <el...
清除element-ui校验错误提示信息
gxh0816的博客
01-07 2298
今天工作中需要实现一个需求就是 当我出现错误提示后,我再次打开这个对话框是希望错误提示信息消失的. 我们可以去看一下element-ui官方文档,里面有一个方法是可以实现这个效果的. 　**this.$refs['form'].clearValidate();** ** 这里的form是你form表单中ref的名字 ** 但是后面又碰到一种情况,代码一样但是缺一直报错.我的form表单写在card卡片下的.不知道是不是这个原因造成的. 进行断点以后发现this.$refs[“exchGoods
element-ui的表单验证如何清除校验提示语
爱代码的小海的博客
11-09 1万+
问题场景： 最近在进行项目开发的时候，遇到了这样的一个问题： 对表单域中的数据进行校验的时候，其中有一项比较特殊，不是简单的输入框，下拉框这些表单元素，而是自己写的一个el-table的选择弹窗，我对它的校验如如下： protocolId: [ { required: true, message: '请选择解析协议', trigger: 'blur'}, ], 这样可以实现校验功能，但是会存在一个问题，如果触发的了校验条件（提交按钮），提示了错误信息，后续即使重新选择了数据，错误信息依旧会存在
elementUi 清空全部rules 错误提示 或某个字段提示
m0_65730686的博客
07-05 533
【代码】elementUi 清空全部rules 错误提示 或某个字段提示。
element-ui的form表单校验踩坑
weixin_47783830的博客
08-21 1372
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。 管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码： 这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la
element UI 字段必填校验默认提示文字 ‘%s is required‘ 修改为自定义中文 “该项为必填项“
gzs9527的博客
04-01 4326
修改 ElementUI 字段必填校验提示文字（‘xx is required’），修改为中文 “必填” 目标 element UI 字段必填校验提示文字 ‘xxx is required’ 修改为中文 “该项为必填项” 方法（修改代码为） import Schema from 'async-validator' // 设置报错提示信息 Schema.messages.required = fieldName => { return '该项为必填项' } 说明 上面的代码修改了 async
Element UI 中表单元素的验证机制
小海前端
12-08 2240
文章目录前言一、Element UI中表单元素的验证规则二、async-validator 的验证规则1、required2、type3、enum4、message5、trigger6、min、max7、len8、pattern9、validator三、两个官网案例总结 前言 Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub 的地址是 https://github.com/yiminghe/async-validator，至今在 Git
vue+element-ui 关闭对话框清除验证和表单内容
热门推荐
qq_36437172的博客
03-04 1万+
在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下： 1、首先在你的对话框 取消按钮 加一个click事件， <div slot="footer" class="dialog-footer"> 　　<el-button @click="handleCancel('form')">取 消</el-button> &...
el-form 中使用:rules校验，输入内容后红色提示没消失
qq_43532275的博客
03-28 3495
chooseImg(val) { this.chooseIndex = val }, // 获取图片url 注释的是没生效的，this.$set方法可以处理输入内容后红色提示没有消失的问题 getImg(data) { switch (this.chooseIndex) { case 1: this.$set(this.form, 'image1', data) // this.form.im...
笔记-vue弹窗表单 element-ui验证提示语(残留)清除
aliceyang2012的专栏
07-13 1430
新建打开弹窗，弹窗里是表单，有输入框，单选框，下拉框，多选，用传统方式的rules加校验，其他都没啥问题，但是el-checkbox-group比较怪，关闭弹窗再打开时，校验仍在，百度一顿收索尝试，大多无效，有一个竟然可以，mark下~起关键性作用的是watch，showDialog 对应 el-dialog 中的:visible.sync="showDialog"如图（一开打就有提示了，当然不行）
elementui form组件出现英文提示
哼
08-15 2566
经查看，代码采用的是elementui的form组件，在el-form-item中使用了required属性，同时又用rules自定义了表单验证规则。所以，把el-form-item中的required属性去掉，提示词用自定义验证规则中的message字段实现即可。今天让解决一个bug，是表单组件提示词会出现英文。有时会出现中文，有时会出现英文。
ElementUI表单验证手动触发
donghua201的博客
09-25 3261
el-form-item label="主轴编号" prop="axisCode" label-width="180px">
el-form表单如何清除校验提示语
qq_42453751的博客
08-25 6221
el-form表单如何清除校验提示语 实现的表单如下： 步骤1.当未选择持卡人时，点击确认按钮，提示校验规则 步骤2.当选择关闭表单的时候，不会提示 步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现 问题：再次点击表单进入时，出现了校验规则 解决办法： 重点代码 :model=“fingerFrom” <el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di
el-form表单校验出现英文
anwen743680的博客
06-30 2499
el-form表单校验，已经配置rules，当我们手动删除输入框的值，提示firstParty is required英文提示，配置的明明是中文：请选择合同甲方，为何会有英文提示？让我们一起来看代码~ 配置校验规则注意点：1. el-from-item这个组件标签绑定prop属性，校验规则才能生效（此处prop的值是我们绑定在el-from标签上对象的key）；2. 观察代码，我们已经在rules配置自定义校验规则，所以要将el-form-item标签内部required去掉（这时再查看页面，发现
elementUI el-form表单校验不消失 强制去掉校验
m0_64491262的博客
02-10 4781
尝试变更form中字段的默认类型,修改rules的change或者blur,都没用.最后选择给form绑定change事件,有值时取消校验.直接点击提交或保存,弹出校验信息('请输入xxxxxx')在输入框中输入信息后,校验信息无法自动消失。
vue3 + element-plus清除表单校验
liuzaixi的博客
08-22 1915
使用：ref名称.value.resetField()
常见必填校验提示语格式
最新发布
04-28
<think>好的，我现在需要回答用户关于前端表单验证中必填项校验提示语的问题。用户想了解常见的格式、示例以及如何在前端实现。首先，我要回顾一下用户提供的引用内容，看看有没有相关的信息可以借鉴。 引用[1]提到element-ui表单校验的问题，用户遇到必填项提示的双重验证，先是原生英文提示，再是中文提示。这说明原生HTML5验证和自定义验证可能存在冲突，需要注意如何正确设置提示语。 引用[2]和[5]都涉及HTML5的表单验证，特别是使用required属性和pattern属性进行验证，以及如何修改默认的提示语言。比如，通过设置novalidate属性来禁用原生验证，或者使用setCustomValidity方法自定义提示。 引用[3]介绍了一个前端验证库Inspect，支持自定义错误消息和实时验证，这可能给用户提供一个解决方案，即使用第三方库来简化验证流程。 引用[4]是关于Laravel后端验证的自定义消息，虽然主要是后端，但可以提醒用户前后端验证需要一致，提示语格式统一。 接下来，我需要整理必填项提示语的常见格式，比如“XX不能为空”或“请输入XX”，并提供不同前端框架或原生HTML的实现示例。同时，要指出注意事项，如避免中英文混合、保持一致性等。 用户可能需要具体的代码示例，比如在原生HTML中使用JavaScript覆盖默认提示，或在Vue/React中的实现方式。同时，用户可能关心如何避免原生提示的干扰，比如引用[1]中的问题，可以通过设置novalidate或使用自定义验证库解决。 最后，生成相关问题，帮助用户深入理解，比如如何自定义其他类型的验证提示，或者如何处理前后端验证的一致性。</think>### 必填项校验提示语格式及实现示例 --- #### **一、常见必填项提示语格式** 1. **基础格式** - `[字段名称]不能为空` *示例：`用户名不能为空`* - `请输入[字段名称]` *示例：`请输入手机号`* - `请选择[字段名称]` *示例：`请选择所在城市`* 2. **带格式要求的提示** 结合正则表达式时，可附加格式说明： - `[字段名称]格式不正确（示例：XXX）` *示例：`邮箱格式不正确（示例：example@domain.com）`* 3. **多语言场景** - 英文：`The [field] is required` - 中文：`[字段名称]为必填项` --- #### **二、前端实现方式** ##### 1. **原生 HTML5 验证** ```html <input type="text" name="username" required oninvalid="this.setCustomValidity('用户名不能为空')" oninput="this.setCustomValidity('')"> ``` - `required` 属性标记必填字段 - `setCustomValidity` 覆盖浏览器默认提示[^2][^5] - **注意**：需添加 `oninput` 事件清除自定义提示，避免残留。 ##### 2. **Element UI 表单验证** ```javascript rules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ] } ``` - 通过 `message` 定义提示语，避免原生提示冲突[^1] - 推荐设置 `trigger: 'blur'` 实现失焦验证。 ##### 3. **自定义验证库（如 Inspect.js）** ```javascript Inspect({ rules: { email: { required: { message: '邮箱地址不能为空' }, pattern: { regex: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '邮箱格式不正确' } } } }); ``` - 支持自定义正则和实时验证[^3] - 避免原生提示干扰，统一提示风格。 --- #### **三、注意事项** 1. **禁用原生提示** 在 `<form>` 标签添加 `novalidate` 属性，关闭浏览器默认验证： ```html <form novalidate>...</form> ``` 2. **中英文统一** 若需英文提示，直接修改 `message` 内容： ```javascript { required: true, message: 'Username is required', trigger: 'blur' } ``` 3. **前后端一致性** 后端验证提示需与前端对齐（参考 Laravel 自定义消息示例[^4]）。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值