el-from表单验证时格式错乱解决方法

最新推荐文章于 2024-05-21 17:19:31 发布
最新推荐文章于 2024-05-21 17:19:31 发布
阅读量597 收藏 1
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bootsboy/article/details/127551794
版权

解决方法:

需要添加样式

.el-form-item__error{

        position:relative;

        text-align:left;

        top:0px;

        margin-top:2px;

}

 

校长欲成长哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
Mr_Jule的博客
05-31 1678
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
如何修改el-form 校验 提示的css样式
qq_41531604的博客
05-27 668
::v-deep .error .el-form-item__error { top: 55%; color: black; } 我这边有个bug就是这个提示的错误信息位置错位了，然后要改一下这个提示的位置记录一下
7、el-form 自定义校验规则、修改校验提示信息样式
sunnnnh的博客
07-16 3829
1、自定义校验规则 参考：(14条消息) 对element的表单进行验证和限制（自定义验证规则）_阮俊维的博客-CSDN博客 2、修改校验提示信息样式 查看F12后发现是el-form-item__error类选择器控制的，但是在当前页面引用这个类选择器重写样式并不会生效 （1）css中：用 深度作用选择器 >>>（仅作用与css） （2）sass/less：需要用 /deep/ 选择器：/deep/ .el-form-item__error { } ...
自定义组件＜IP输入框＞在el-form的不同size中出现显示异常的BUG及修复
c_xiaoxiaobai的博客
05-11 865
场景复现： 在一次自定义IP输入框组件的应用中，因为el-form的size设置不同，导致组件的样式显示出错，场景复现如图： 因为是同一个组件的复用，因此定位于不同form表单的css差异性 原因分析： 显示正确的css： 显示错误的css： 显然，显示错误的这一组中，el-input__inner距离top的距离远了不少，但是其他的样式信息都是一致，因此怀疑因为form的size不同，导致其上下边距出现差异 继续检查.el-form-item 因为错误是出现在行内的，所以padding、
ElementUI 中 栅格布局 混乱问题
zouhuu的博客
07-24 2292
ElementUI中栅格布局混乱问题。
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-row和el-col出现排版错乱
weixin_47509924的博客
02-23 3219
element 的el-row排版错乱问题
el-form之表单校验自动定位到报错位置
阿清的前端进阶之路
07-09 4570
使用 elementui 的 el-from 组件表单校验不通过，自动定位到校验失败的表单项的位置，提高用户体验。
vue--element-ui 修改el-form-item__error样式
wlijun_0808的博客
06-03 3555
vue修改element-ui的样式
el-form 加 v-if使用时出现的校验混乱的问题。
weixin_43936040的博客
08-18 824
有的时候会有选择不同的部分，那页面展示页不同功能的需求 其中这整个页面的输入框和下拉选项都是套在一个form里面的。切换的时候会有表单校验突然又冒出来的情况 情况说明 整个页面都是套用在一个form里面，选择内部外部的时候要清空掉相应的字段。 清空相应的字段后会调用一个去掉表单验证的方法this.$refs.addForm.clearValidate(); 保存的时候会整体进行校验核查一边，所以不同模块选择基本时用v-if判断的。 处理相应的方法 表单校验的时候要校验的字段一定要在data里先声明
修改elementUI规则表单输入框错误信息样式
SZnAl的博客
04-28 2484
使用elementUI的 规则表单，他的错误信息提示样式不是我们需要的 如果需要改变错误信息的位置以及字体大小、颜色等，需要如下设置 可以看出来他的class名是 .el-form-item__error 但是我们直接更改的话不会生效。 需要使用用 深度作用选择器 >>> 方式如下 .el-form-item >>> .el-form-item__error{ padding-left: 0.33rem; } 这样即可生效 ...
Vant 4 表单输入框样式错误问题 [已解决]
qq_45048851的博客
03-08 860
Vant 4 表单输入框样式错误问题 [已解决]
elementUI中form表单验证错乱
Yana1225的博客
08-19 1904
同一套表单，在起草时就是OK的，在编辑中验证就错乱了，项目中是因为 template 有 v-if 判断，去掉之后，验证就正常了，然鹅……我在自己的小练笔中模拟了 n 种情况后，还是没能复现这个bug，心累。 然后想了想，突然想扒一扒源码，在element-ui.common.js中找到了validate方法，打断点在里面，顺流而下执行了一下，发现到this.fields这里，就出现了莫名其妙的情况了，里面要不就是把不需要验证的component放在了里面，要不没有需要验证的component….
工作爬坑之el-form内el-select与el-input纵向不对齐的问题
weixin_36352085的博客
11-19 6540
这里写自定义目录标题工作爬坑之el-form内el-select与el-input纵向不对齐的问题原本的写法正确写法 工作爬坑之el-form内el-select与el-input纵向不对齐的问题 vue的资料看了挺多,自己做一个项目还是第一次.这是新项目踩到的第一个坑,关于el-form的.截图引用https://segmentfault.com/q/1010000021441147,因为我看这个帖子下没有解决这个问题 原本的写法 <el-form :model="form" label-widt.
vite+ts+mock+vue-router+pinia实现vue的路由权限
beekim的博客
05-20 324
vite.config.ts配置。
【vue嵌套iframe】实现项目重构
最新发布
qq_32768761的博客
05-21 1259
基于vue3示例页面嵌套iframe页面。适用于使用vue进行项目重构及访问第三方页面。实现vue路由与内部iframe访问地址同步变化。
怎么修改el-from表单验证提示信息位置
06-02
在 `element-ui` 中，可以通过 `el-form` 组件的 `:label-position` 属性来控制表单项的标签和输入框的位置。当 `:label-position` 的值为 `top` 时，表单项的标签会在输入框上方显示，而表单项的验证提示信息会在输入框下方显示。当 `:label-position` 的值为 `left` 或者 `right` 时，表单项的标签会在输入框左侧或右侧显示，而表单项的验证提示信息会在输入框的右侧或左侧显示。 除此之外，还可以通过 `el-form-item` 组件的 `prop` 属性来指定表单项的验证规则，当输入框中的内容不符合规则时，会显示对应的验证提示信息。可以通过 `el-form-item` 组件的 `:error` 属性来控制是否显示提示信息，以及 `error` 的值来控制提示信息的具体内容。 下面是一个例子，展示了如何在 `el-form` 中控制表单验证提示信息的位置： ``` <template> <el-form :label-position="labelPosition" ref="form" :model="form"> <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 v-model="form.password" type="password"></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 { labelPosition: 'top', form: { username: '', password: '' } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { alert('验证通过'); } else { alert('验证失败'); } }); } } }; </script> ``` 在这个例子中，我们使用了 `el-form` 和 `el-form-item` 组件来创建了一个简单的表单，其中每个输入框都有对应的 `prop` 属性来指定验证规则。当用户提交表单时，我们调用了 `validate` 方法来验证表单内容，并根据验证结果显示对应的提示信息。可以通过修改 `labelPosition` 属性来调整表单项的标签和输入框的位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值