el-form修改表单校验提示信息的位置

最新推荐文章于 2024-05-22 10:38:57 发布
最新推荐文章于 2024-05-22 10:38:57 发布
阅读量8.9k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45894929/article/details/115226592
版权 
/deep/.timr.el-form .el-form-item__error {
  top: 21%;
  right: 25% !important;
  left: unset;
}
qq_45894929
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element-ui表单验证
web_note的博客
12-11 1万+
1. html el-form :model="user" :rules="rules" ref="ruleForm" label-width="80px"> el-form-item label="用户名" prop="username" class="delu-box"> el-input v-model="user.username" placeholder="请输
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
form表单校验报错位置改变的问题（自定义组件）
Jlvu1的博客
06-22 4352
最近的项目需要用到form表单的校验，form表单校验的报错默认是在下方，但是这次要求是改为右侧，经过查阅官网发现:inline-message='true'属性，可以使如（el-input等）的报错改变为右侧。但是偶然间发现，这个属性，如果在el-form-item内嵌入了其他组件，如自定义组件，这个时候，该属性无法直接使报错改变，还是在下方提示。经过一番尝试，发现在组件外包一层div设置style属性display:inline-block之后，才可以生效，使报错改变为右侧。 ...
使用elementUI的form表单校验时，错误提示位置异常解决方法
最新发布
xuelong的博客
05-22 584
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
lvdoubing81的博客
12-01 7188
今天带我的大佬碰到一个有意思的坑，现象如图，错误提示没有在文本框下，而是出现在最左边的文字下。 原因：el-form 没有加上 label-width，默认宽度为0，导致验证错误的提示信息直接出现在了最左边。 解决： 给el-form加上label-width 或者是 el-form-item 上加上label-width 就可以正常显示了。 没什么难度，只是觉得有点意思，所以记录一下。 ...
form表单验证快速定位到需要验证的位置
H_eartbeat的博客
10-26 527
form表单验证快速定位到需要验证的位置
（翻译）表单中显示错误消息的最佳位置
gc_2299的博客
03-29 331
设计人员设计表单时应将错误消息放在什么位置？如果放的位置超出用户预期，则会影响他们填写表单。   用户填错了表单信息，需要让他们清楚出错之处，以便纠正后重新提交表单。用户愿意填写表单，但要是纠错花的精力太多，他们也可能会弃填表单。
element form表单验证 页面回到第一个验证错误的位置
tq1711的博客
12-24 1105
formErrorScroll () { // 报错回到第一个错误的地方 if (document.querySelector(’.el-form-item__error’)) { document .querySelector(’.el-form-item__error’) .parentNode.scrollIntoView({ block: ‘start’, behavior: ‘smooth’ }) } }
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
el-form 多层级表单的实现示例
11-19
前言 ...el-form 使用，详情可参见： Form 表单 有几个比较重要的属性： ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 prop 表单域 model 字段 label 标签文本 在提交按钮的
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-table树形表格表单验证(列表生成序号)
10-15
在`el-table`中进行表单验证，需要利用`el-form`和`el-form-item`组件。每个表格列都应该用`el-form-item`包裹，以定义验证规则。以下是一个简单的例子： ```html <el-form ref="form" :model="form" label-width=...
el-form嵌套el-table编辑，校验信息显示在气泡框中
weixin_43939111的博客
06-02 2083
/}).catch(er=>{row.isEdit = true})//如果接口反馈失败，保持输入状态方便识别刚刚编辑的行。但是，我不得不将错误提示放到el-tooltip中显示，因为产品给出的校验失败信息实在是太太太太太长长长长长长了！//isEdit=是否显示输入框，ms1对应32位校验是否显示错误信息，ms2对应非空校验是否显示错误信息。//注意：这里是”==“而不是”===“，如果项目采用严格模式，需要用number转换一下。//非空不通，显示内容为非空校验错误提示，对应errorMess2。
el-form之表单校验自动定位到报错位置
阿清的前端进阶之路
07-09 4767
使用 elementui 的 el-from 组件表单校验不通过，自动定位到校验失败的表单项的位置，提高用户体验。
el-from校验精准定位的问题——提升客户体验度
baidu_41604826的博客
05-26 725
el-from校验精准定位的问题 适用场景：表单内容过多不同屏幕可能出现滚动条，此时提交表单部分字段被遮挡，导致用户无法直观的看到错误提示。 目标效果：如果校验不通过，可以直接定位到错误的位置。 具体代码实现： el-form表单代码 <el-form ref="elForm" :model="dialogForm" label-width="130px" label-position="left" :rules="rules"> <el-form-item label="企业名
使用el-form之表单校验自动定位到报错位置问题,，提升用户体验
weixin_44799030的博客
03-01 937
时间关系，直接把{ block: “center” }改成了{ block: “nearest” })
element表单校验新玩法：一键定位未通过字段位置
Shids_的博客
04-24 3229
element表单校验新玩法：一键定位未通过字段位置
el-form表单label添加icon提示和必填校验
口袋的天空的博客
04-23 5226
像下面这样，表单前面必填校验，再在label前面添加Icon 提示悬浮文字。 如何实现呢？ 如下： el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签
el-form多层表单校验
10-13
对于el-form多层表单校验，可以使用自定义校验规则来实现。具体步骤如下： 1. 在el-form中设置ref属性，方便在代码中获取表单数据和进行校验。 2. 在表单项中设置prop属性，用于在校验规则中引用该项数据。 3. 在el-form中设置rules属性，为每个表单项设置校验规则。 4. 在自定义校验规则中，通过this.$refs.form.validate()方法来触发表单校验。 以下是一个示例代码： ``` <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="form.age"></el-input> </el-form-item> <el-form-item label="联系方式"> <el-form ref="contactForm" :model="form.contact" :rules="contactRules"> <el-form-item label="电话" prop="phone"> <el-input v-model="form.contact.phone"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.contact.email"></el-input> </el-form-item> </el-form> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '', age: '', contact: { phone: '', email: '' } }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值', trigger: 'blur' } ] }, contactRules: { phone: [ { required: true, message: '请输入电话号码', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '邮箱地址格式不正确', trigger: ['blur', 'change'] } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，提交表单数据 } else { // 表单校验不通过，提示错误信息 } }) } } } </script> <style> /* 样式省略 */ </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值