element表单校验输入框手动清空时出现XXX is required提示

已于 2022-05-21 10:58:03 修改
阅读量4k 收藏 2
点赞数 7
分类专栏： elementui 文章标签： vue.js elementui javascript
于 2022-05-21 09:54:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48259951/article/details/124894658
版权

使用element UI el-form表单校验时，当输入框手动清空内容时会出现XXX（ Form-Item 的 prop 属性设置的校验字段名） is required提示，输入框失去焦点之后，又恢复了正常的中文校验规则提示，如下图：
在这里插入图片描述
在这里插入图片描述

在校验规则rules里已经设置了必填、不为空属性 required: true，因此不必再在el-form-item添加required，删除el-form-item里的required即可。
在这里插入图片描述

程序员里的BUG
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI 表单项自定义校验设置必填项required的问题
m0_37406045的博客
01-30 4830
使用elementUI的表单校验有时需要用到默认校验和自定义校验的组合规则，比如下面这种部分表单项需要根据其他非input内容是否为空进行校验。
React+Antd项目，Form的Input中已经有内容，但是还是提示此项为必填项，不能为空
BigFamer的博客
08-26 4713
我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React + Antd构建含有多个Input组件的Form表格时，遇到了下述问题…...
「Element-UI 表单添加tooltip提示信息」
最新发布
qq_41238459的博客
05-22 418
Element-UI 表单添加tooltip提示信息
elementUI name is required, * is required
carbonzhao的专栏
05-20 1045
属性引起的，说明自定义校验规则和required属性不能同时出现，否则两种校验都会生效，而最后这两个表单项并没有input框，设置required属性就会判定内容为空，就会提示。那么如何在使用自定义规则的同时又显示必填项的*号呢？只需把class设置为is-required即可。在偶尔的几率下会出现英文的提示！删除原来的required标记属性即可！改良后的代码如下：因为此项上必填项，所以需要使用。经过排查，发现是el-form-item中的。
el-form 表单验证出现xxx is required
hhhhhy
03-09 1万+
我在实践中遇到了这个问题，目前百度只有这一个答案：https://segmentfault.com/q/1010000023133572 实践之后我发现除了用setTimeout、nextTick这两个方法以外，还有两个方法 方法一：不用required属性。通过添加is-required类名来添加必选的那个红色图标 方法二：required属性不要用在form-item里，用在具体规则里 方法一源码： <template> <el-form ref="supply" :
Vue Element 使用required提示语问题 出现‘xxx is required‘解决方案
hikktn的博客
03-25 7818
当我们使用form表单，然后加上rules规则验证，但是发现了下面这个问题： 问题原因：遇到这个问题，就是你要检查你是否少写了message（提示语），否则就会出现默认语句。 解决方案就是加上message。 ......
vue+element实现表单校验功能
12-09
表单校验功能:   实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules=&rdquo;rules&rdquo;;ref=&rdquo;reference&rdquo; 2.在el-form-item定义prop=&rdquo;name&rdquo;; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 ...
element 结合vue 在表单验证时有值却提示错误的解决办法
01-21
绑定的值与规则指定的值一定要相同——- 第一步： 加上rules ref 第二部： 活动名称 prop=name> <el v-model=ruleForm.name></el> 加上prop 第三部： rules: { name: [ { required: true, messag
Vue element-ui父组件控制子组件的表单校验操作
10-15
当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户输入进行验证，确保数据的完整性和准确性。 总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性...
form 表单验证-出现xxx is required
hfeideyu的博客
11-22 4417
问题描述： 做表单验证时，当把输入框的值全部清空时，它会自动验证，出现xxx is required，当点击失焦时会走我们自己设置的判空。 原因：启用字段设置了required，必填项，只要你在输入框中聚焦离开后就会触发，未填写和输入后删除完都是没有值，则触发非空校验，所以才会有提示。 解决方案： 1、不使用required属性。通过添加is-required类名来添加必选的那个红色图标。因为element就是通过is-required这个类把图标显示出来的。 2、required属性不要用在form-it
elementui form组件出现英文提示
哼
08-15 2011
经查看，代码采用的是elementui的form组件，在el-form-item中使用了required属性，同时又用rules自定义了表单验证规则。所以，把el-form-item中的required属性去掉，提示词用自定义验证规则中的message字段实现即可。今天让解决一个bug，是表单组件提示词会出现英文。有时会出现中文，有时会出现英文。
required date-picker问题
lee_srr的博客
03-01 222
VUE写前端,对date-picker做了rules要求,如下图: 但是在页面我选择了日期,还是出现提示框,是哪里问题?
elment-ui表单初始化校验报红提示
weixin_45536426的博客
11-22 954
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片
Element的表单验证规则，清空或填充数据如何避免自动触发
热门推荐
年三十的博客
09-25 1万+
前言 使用Element中的form表单检查规则，编辑窗口中填充数据，新建时需清空 需要注意一点： 方法：resetField，不是把表单属性都清空，而是重置为初始值 比如form在加载渲染之前，属性已经被赋值（初始值），所以再次使用resetField不会清空表单数据，而显示初始值 可以理解为重置功能 问题 将表单数据进行清空后，出现表单rules规则自动验证提示 点...
使用el-date-picker报错
nannantang的博客
08-25 864
使用el-date-picker报错，使用align解决
【已解决】el-form required 提示英文改中文
程序边界
06-09 6056
文章目录 最近发现 el-form 的 el-form-item 配置 required 之后 提示是英文，类似 “xxx is required”： <el-form-item required>...</el-form-item> 即使是表单验证或是自定义校验规则，只要有在标签上设置的required，就会或是在 不经意间 出现英文提示。。。 正确做法： 去掉标签上设置的required； 使用 rules 上的 required 设置： data() { retur
element 之 el-form-item的require属性是动态的
weixin_43136717的博客
10-29 1738
【代码】element 之 el-form-item的require属性是动态的。
element-ui表单验证，value一直为undefined的一种可能解决方案
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
vue element 表单校验输入框只能输入数字
10-08
在Vue Element中，表单校验输入框只能输入数字可以通过设置`type`属性为`number`来实现。以下是一个示例代码： ```html <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="数字输入框" prop="numberInput"> <el-input v-model="form.numberInput" type="number"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { numberInput: '' }, rules: { numberInput: [ { required: true, message: '请输入数字', trigger: 'blur' }, { pattern: /^[0-9]*$/, message: '只能输入数字', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交逻辑 } else { // 表单校验不通过，提示错误信息 } }); } } } </script> ``` 在上述示例中，我们将`type`属性设置为`number`，并在`rules`中定义了校验规则，其中使用了正则表达式`/^[0-9]*$/`来限制只能输入数字。在提交表单时，通过调用`validate`方法进行表单校验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值