2021-05-24vue element-ui 使用required表单校验时自定义提示语句

最新推荐文章于 2023-10-25 10:49:14 发布
最新推荐文章于 2023-10-25 10:49:14 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44546460/article/details/117220635
版权

vue element-ui 使用required表单校验时自定义提示语句在这里插入图片描述
这个去不掉*号，原来是表单验证规则 required
在这里插入图片描述
在检查模式下可以去掉content的对号，实现
在这里插入图片描述
也可以不使用表单验证
在这里插入图片描述
最后我保留了表单验证，因为是必填项，必须用，所以我修改了 element-ui里的宽度。

 <el-form :model="form_autoReportInterval" ref="form_autoReportInterval" :rules="rules_autoReportInterval"  label-width="120px" >
浪&潮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI 表单项自定义校验设置必填项required的问题
m0_37406045的博客
01-30 4852
使用elementUI的表单校验有时需要用到默认校验和自定义校验的组合规则，比如下面这种部分表单项需要根据其他非input内容是否为空进行校验。
element UI 字段必填校验默认提示文字 ‘%s is required‘ 修改为自定义中文 “该项为必填项“
gzs9527的博客
04-01 3493
修改 ElementUI 字段必填校验提示文字（‘xx is required’），修改为中文 “必填” 目标 element UI 字段必填校验提示文字 ‘xxx is required’ 修改为中文 “该项为必填项” 方法（修改代码为） import Schema from 'async-validator' // 设置报错提示信息 Schema.messages.required = fieldName => { return '该项为必填项' } 说明 上面的代码修改了 async
vue element-ui 使用required进行表单校验时自定义提示语
热门推荐
我会好好努力的
12-26 4万+
如果我们直接在html里面使用required时 当我们在输入框输入一些数据，然后使用backspace逐个删掉，删完的时候就又会出现 即使我们已经添加了rules验证 此时我们需要进行如下修改 首先把HTML里面的required删掉，然后在js的rules验证里添加 即可修改验证 ...
antd vue表单校验中，自定义组件校验时错误提示不自动消失的问题
Wq_2977的博客
10-25 1161
antd vue表单组件中，自定义组件校验时错误自动消失的问题处理
element 之 el-form-item的require属性是动态的
weixin_43136717的博客
10-29 1754
【代码】element 之 el-form-item的require属性是动态的。
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
Vue element-ui父组件控制子组件的表单校验操作
10-15
以下将详细介绍如何实现Vue Element-UI父组件控制子组件的表单校验操作。 首先，我们来看一下父组件的代码。在父组件的模板中，我们引入了一个名为`child-form`的子组件，并通过`ref`属性（`ref="childRules"`）来...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
在开发Web应用时，我们经常需要处理复杂的表单数据，特别是在使用Element-UI与Vue.js框架的情况下。Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能...
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
目录 演示版 您可以在查看Vue-custom-element... 要使用vue-cli构建Web组件，必须使用以下命令： vue-cli-service build --target lib --name your-component-name src/main.js 注意：命令vue-cli-service build --ta
vue elementui表单验证组件动态修改required状态
miem_yang的博客
11-17 6817
最近遇到的需求：在一个表单里，有一个单选项检查结果：（无问题 有问题 不适用）（必填）和一个输入框问题描述：input(选填)，当但选项值为（有问题）时输入框为必填项，否则为选填项。如果像以前表单验证正常写法就会报错如下： 正常显示代码如下 下面展示一些 内联代码片。 <el-form-item label="问题描述" prop="desrc" :rules="{required:menuForm.result == '1'? true:false,message:'请输入问题描述'}">
element表单校验输入框手动清空时出现XXX is required提示
qq_43654065的博客
06-16 801
将标签内的‘required’删除 element 验证出现英文以及自动验证问题_皮蛋灬的博客-CSDN博客
Vue Element 使用required提示语问题 出现‘xxx is required‘解决方案
hikktn的博客
03-25 7854
当我们使用form表单，然后加上rules规则验证，但是发现了下面这个问题： 问题原因：遇到这个问题，就是你要检查你是否少写了message（提示语），否则就会出现默认语句。 解决方案就是加上message。 ......
elementui的表单验证踩坑-动态绑定输入框required后只显示英文提示
qq_43294163的博客
10-10 5788
做项目的时候遇到一个要求，需要在单选框选到某个选项的时候新增一个输入框，同时对输入框的required也需要动态绑定，一开始想到的方法就是直接在新显示的输入框上加上v-if和:required。 <el-form-item label="用户类型" prop="userType"> <el-radio-group v-model="addUserForm.userType"> <el-radio :label="0"
element-ui表单验证
wjw_de_java的博客
12-28 94
element-ui表单验证 官方介绍： 自定义校验：validator 然后在data（）中定义方法实现自定义方法 在提交时验证from表单：
element required动态响应
alokka的博客
09-11 757
<el-form-item label="充值提醒：" prop="chargeWarn" :required="!!config.alarmThreshold ? true : false"> <el-checkbox-group v-model="config.chargeWarn"> <el-checkbox label="successPush">成功提醒</el-checkbox> <el
elment-ui表单校验
qq_37405634的博客
11-14 245
一、基本用法 <el-form :model="form" :rules="rules" ref="testForm"> <el-form-item label="姓名" prop="name" ref="validateName"> <el-input v-model.trim="form.name"></el-input> </el...
ElementUI 表单 rules 规则
普罗旺斯
08-23 1万+
function验证器，可以为指定字段自定义验证函数：function(rule, value, callback, source, options)rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称value：当前校验字段的值callback：校验结束的回调函数，不管判定成功或者失败，必须调用。
vue 下input标签的required属性提示文字修改 （国际化问题）
april_4的博客
05-09 2万+
我觉得input框require的时候，浏览器给的那种提示还挺好的～个人见解～但是国际化又是个问题，网上一般给出的是这样的&lt;input type="text" required oninvalid="setCustomValidity('不能为空aaa')" oninput="setCustomValidity('')"&gt;但是里面的文字要国际化啊，试着用vue里面带的 $t("plac...
vue中element-ui清除表单校验
最新发布
05-24
在vue中使用element-ui进行表单校验时，可以通过调用`this.$refs.formName.resetFields()`来清除表单的校验状态。其中`formName`为表单的ref属性值。 示例代码如下： ```html <template> <el-form :model="form" :rules="rules" ref="myForm" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('myForm')">提交</el-button> <el-button @click="resetForm('myForm')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log('表单校验通过') } else { console.log('表单校验失败') } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } } </script> ``` 注意，在调用`resetFields()`之前，需要确保该表单已经被挂载到了DOM上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值