vue element-ui 使用required进行表单校验时自定义提示语

最新推荐文章于 2026-04-22 05:11:49 发布
原创 最新推荐文章于 2026-04-22 05:11:49 发布 · 4.7w 阅读 · 19 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #element-ui #表单验证

如果我们直接在html里面使用required时

当我们在输入框输入一些数据，然后使用backspace逐个删掉，删完的时候就又会出现

即使我们已经添加了rules验证

此时我们需要进行如下修改

首先把HTML里面的required删掉，然后在js的rules验证里添加

即可修改验证

undefined:验证值是否未定义
06-20
不明确的 验证值是否未定义。 安装 $ npm install validate.io-undefined 要在浏览器中使用，请使用 。 用法 var isUndefined = require ( 'validate.io-undefined' ) ; isUndefined(值) 验证value是否为undefined 。 var value ; var bool = isUndefined ( value ) ; // returns true 例子 var isUndefined = require ( 'validate.io-undefined' ) ; console . log ( isUndefined ( undefined ) ) ; // returns true console . log ( isUndefined ( null ) ) ; //
Qt项目实战：将QXlsx源码集成到你的.pro文件，5分钟搞定Excel数据导入导出
最新发布
weixin_30443731的博客
04-22 323
本文详细介绍了如何在Qt项目中快速集成QXlsx库，实现Excel数据的高效读写。通过源码集成方案，开发者可以避免动态库的兼容性问题，5分钟内完成配置，并掌握基础读写、样式设置、多工作表操作等实用技巧，显著提升开发效率。
解决require is undefined的问题
qq_44482048的博客
04-17 3774
错误详情： 这是由于从node.js 14版及以上版本中，require作为COMMONJS的一个命令已不再直接支持使用，所以我们需要导入createRequire命令才可以 解决方案： 需要在使用require之前引入如下代码： //解决使用require的时候报 require is undefined的错误 import { createRequire } from 'module'; const require = createRequire(import.meta.url); ...
element UI 字段必填校验默认提示文字 ‘%s is required‘ 修改为自定义中文 “该项为必填项“
gzs9527的博客
04-01 4493
修改 ElementUI 字段必填校验提示文字（‘xx is required’），修改为中文 “必填” 目标 element UI 字段必填校验提示文字 ‘xxx is required’ 修改为中文 “该项为必填项” 方法（修改代码为） import Schema from 'async-validator' // 设置报错提示信息 Schema.messages.required = fieldName => { return '该项为必填项' } 说明 上面的代码修改了 async
el-form组件提示英文问题，改成中文
千里之行，始于足下！
10-09 4832
做项目的时，使用ElementUI组件库中的el-form组件时，设置了el-form-item 属性required，结果出现了英文提示,，类似 “xxx is required”： 解决办法： 1、去掉 el-form-item 的 required 属性 2、只使用自定义校验规则 rules 中的 required:true 进行设置 注意： el-form-item 的 required 属性和自定义校验规则 rules 中 required:true 都可以实现 红色星号（*）的效果 ..
Vue入门基础（三）
小hu同学
12-27 1663
经常会听到说组件化开发，那到底什么是组件呢？怎么组件化开发呢？组件与组件之间是什么关系呢？组件之间的数据共享是怎么共享呢？看下面文章来带你了解 Vue组件 1.1 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 1.2 Vue中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 1.3 Vue组件的组成3部分 .
2021-05-24vue element-ui 使用required表单校验时自定义提示语句
weixin_44546460的博客
05-24 1339
vue element-ui 使用required表单校验时自定义提示语句 这个去不掉*号，原来是表单验证规则 required 在检查模式下可以去掉content的对号，实现 也可以不使用表单验证 最后我保留了表单验证，因为是必填项，必须用，所以我修改了 element-ui里的宽度。 <el-form :model="form_autoReportInterval" ref="form_autoReportInterval" :rules="rules_autoReportInterval
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
热门推荐
橙-极纪元-JJYCheng
06-17 3万+
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
vue+element 学习之路（五）自定义表单校验
weixin_39327044的博客
04-26 1111
示例： 非空校验： 格式校验： 几个常用的校验规则 required：是否非空 max：最大字符数 min：最小字符数 首先给表单绑定校验规则，表单加上ref属性，最后方便遍历表单校验 定义规则： rules中定义的校验方法通过prop属性传递 当然了这只是第一步校验，当输入框变化时进行校验，为了保证数据正确性，我们通常在提交表单时需要再校验一次 看控制台 源码： <template...
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
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 input框添加必填required属性
weixin_45456215的博客
03-29 2万+
vue input框添加必填required属性 el-form 里面添加 :rules="rules"属性对表单进行验证， 对应字段的绑定 required属性和提示信息放在下面的script 的data数据里面，如图编写规则 完成这三步就简单实现了添加required属性和修改提示信息。 ...
element表单校验输入框手动清空时出现XXX is required提示
m0_48259951的博客
05-21 4679
element表单校验输入框手动清空时出现XXX is required提示，如下图， 输入框失焦后恢复正常中文校验提示 在校验规则rules里已经设置了必填不为空属性required: true，不必再在el-form-item添加required，删除el-form-item里的required即可。 ...
vue中的require
个人博客
07-31 1万+
require 是 node 中的一个方法，他的作用是 用于引入模块、 JSON、或本地静态文件。require会在编译过程中被执行，最终会得到对应文件的内容（例如json文件）或者是文件编译后的目录路径（例如图片文件，当然如果图片大小小于一定值，会被直接转换为base64编码，具体配置参考vue-cli）。因为在js中直接使用字符串路径时，编译后也会使用当前字符串路径引入，而编译后的图片路径并不一定是图片存放的目录路径。可以遍历文件夹的文件，从中获取指定文件，自动导入模块。获取引入的所有文件的key，
element 表单验证值为undefined的原因及解决方案
qing_xing_的博客
09-17 8021
闲话少说，步入正题。 表单验证的时候，值为undefined的原因，网上说的有三种 1、prop名称和rules中的名称一致 2、没有指定的model 3、绑定的属性没有在data中声明（这个可有可无） 除了这三种外，还有一种情况，在验证之前 我们都能拿到表单的值，但是验证之后打印的值为undefined。 我这里具体问题出现的场景：子组件是抽屉，需要里面的值回显到父组件上，但是点击提交的时候值为undefined resetFields（）会将数据恢复初始值，这时候传过去的数据也会.
form 表单验证-出现xxx is required
hfeideyu的博客
11-22 5922
问题描述： 做表单验证时，当把输入框的值全部清空时，它会自动验证，出现xxx is required，当点击失焦时会走我们自己设置的判空。 原因：启用字段设置了required，必填项，只要你在输入框中聚焦离开后就会触发，未填写和输入后删除完都是没有值，则触发非空校验，所以才会有提示。 解决方案： 1、不使用required属性。通过添加is-required类名来添加必选的那个红色图标。因为element就是通过is-required这个类把图标显示出来的。 2、required属性不要用在form-it
iview表单校验必填项required时显示xxx is required，或者trigger验证不刷新问题
george_ye的博客
06-12 2404
使用iview的form组件，表单项为必填项时遇到的问题
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...
element-ui 常见问题整理
小白
12-13 2795
Table 表格相关 1.设置表格el-table表头的颜色：header-cell-style可以修改背景及其他 <el-table :data="tableData" :header-cell-style="{background:'#000', color:'#fff'}" > 2.设置某一列的字段字体颜色 方法1： :cell-style="setCellColor" <el-table :data="tableData" :cell...
required date-picker 时间选项有值还校验不通过的问题
weiwei4969的博客
12-27 306
el-form-item 上使用了 required 时不应该用v-if。问题：时间选项有值提交校验报。解决办法1：换成v-show。解决办法2：使用slot插槽。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值