rules表单验证提示语位置调整

最新推荐文章于 2025-03-07 16:11:51 发布

夏之小星星

最新推荐文章于 2025-03-07 16:11:51 发布

阅读量910

点赞数 3

文章标签：前端 css

本文链接：https://blog.csdn.net/Cabriella_/article/details/136168360

版权

本文描述了在表单验证时，提示语因距离输入框过远而被下方元素遮挡的问题，提供了解决方案：使用深级选择器调整`.el-form-item.is-error.el-input__inner`的`margin-bottom`和`.el-form-item__error`的`margin-top`，以改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证提示语距离上方输入框过远，被下方元素遮住

在这里插入图片描述

解决方法

:deep .el-form-item.is-error .el-input__inner {
margin-bottom: 20px;
}
:deep .el-form-item__error {
margin-top: -10px;
}

效果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夏之小星星

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

表单：校验提示信息的位置

weixin_30532973的博客

01-15

3812

表单：校验提示信息的位置可以用于表单提交验证时，如果input文本框填写不符合要求的信息，可以在文本框右边显示错误提示。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title>...

【Eelectron-vue】构建桌面应用（15）- 修改antdv输入框默认样式及表单校验提示信息

chenqk_123的专栏

10-22

3372

1.前言现在的客户端与以往的有些区别，比如登录页面的输入框，大都废弃了之前的登录框样式，而采用只存在底边的输入框。还有就是输入框的错误信息都会采用浮层的形式提示，而不是瀑布流的方式去提示。在借鉴了其他客户端的方式，做了一些调整，这些调整都需要对antdv组件进行从新修正。因为我是用的是electron-vue+antdv的架构去构建的应用。 2.修改输入框的默认样式先看一下效果图如下： 2.1 修改border仅保留底边我们要做的事情就是：修改输入框为只有底边当输入框获取悬浮事件时，改变b

参与评论您还未登录，请先登录后发表或查看评论

VUE2表单检验及提示的消除

最新发布

shenxiaomo1688的博客

03-07

522

上面的检验存在局限性，当表单数据发生变化时，不能灵活做到提示文字的消除。

修改form表单中rules的验证提示

weixin_49519788的博客

04-03

539

【代码】修改form表单中rules的验证提示。

element rules校验提示信息位置不在input框下

glacierW的博客

06-28

1686

element rules校验提示信息位置不在input框下

使用elementUI的form表单校验时，错误提示位置异常解决方法

xuelong的博客

05-22

1426

最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图

Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误

god_sword_的博客

03-01

4892

Vue中rules表单验证，表单必填*显示位置不对，*显示位置错误

在Vant的基础上实现添加表单验证框架的方法示例

12-01

综上所述，要在Vant基础上构建表单验证框架，我们需要选择合适的验证库，如vee-validate，并对其进行适当的配置和扩展，包括设置中文提示、适应Vant的UI风格、实现分组验证和动态验证功能。通过这些步骤，我们可以...

解决 Vant 框架的 Field 组件 rules 规则错误提示语不动态改变

忘忧

04-26

1595

Vant 的 Field 组件通过 rules 属性来设置验证表单的动态错误提示语

详解vue如何使用rules对表单字段进行校验

10-17

在Vue中进行表单校验，需要在`<form>`元素中绑定一个rules属性，该属性指向一个定义好的验证规则对象。验证规则定义了针对各个表单字段的校验逻辑。例如： ```javascript data() { return { form: { phone: '', ...

[ant design vue] 表单验证成功，提示信息不显示

m0_59697051的博客

12-09

3524

以上是原图以及源代码，input中带有表单验证，但是输入0以后却不显示报错信息，后来通过大哥指点，给每一个input加一个a-form-item问题解决。代码及效果如下：

Jquery表单验证示例：深入学习表单验证技巧

可以为每条规则设定不同的提示语，使得用户更容易理解其输入错误之处。 - **errorPlacement() 方法**：允许自定义错误信息的显示位置，如错误信息可以显示在输入框旁边或在页面的固定位置。 - **validClass 和 ...

ant vue design 表单验证提示如何改为悬浮提示

weixin_35752233的博客

12-30

911

Ant Design Vue 中的表单验证提示默认是出现在表单控件下方的，如果希望改为悬浮提示，可以在使用 a-form 标签时添加 scroll-to-first-error 属性，这样验证错误时会自动滚动到第一个错误的表单控件，并在控件旁边显示提示信息。具体用法如下： <template> <a-form ref="form" :scroll-to-first-erro...

ant vue design 版本（1.7.8） 表单验证提示如何改为悬浮提示

weixin_35752645的博客

12-30

801

Ant Design Vue 是一个基于 Vue.js 的组件库，提供了一系列高质量的 UI 组件，其中也包含了一个表单验证组件。如果你想要使用悬浮提示，可以在使用表单验证组件的时候，设置 trigger 属性为 "hover"： <a-form-item label="用户名" :validate-status="userName.validateStatus" :help="userN...

form表单校验报错位置改变的问题（自定义组件）

Jlvu1的博客

06-22

5219

最近的项目需要用到form表单的校验，form表单校验的报错默认是在下方，但是这次要求是改为右侧，经过查阅官网发现:inline-message='true'属性，可以使如（el-input等）的报错改变为右侧。但是偶然间发现，这个属性，如果在el-form-item内嵌入了其他组件，如自定义组件，这个时候，该属性无法直接使报错改变，还是在下方提示。经过一番尝试，发现在组件外包一层div设置style属性display:inline-block之后，才可以生效，使报错改变为右侧。 ...

elementUI rules表单校验error文字上移

Giraffe0615的博客

12-12

745

elementUI rules表单校验error文字上移

YII 规则rule 里面 min,max 提示错误信息

weixin_34315485的博客

09-29

320

tooShort 如果长度小于10 就会提示手机格式有误 tooLong 如果长度大于13 就会提示手机号码太长了转载于:https://www.cnblogs.com/wangshuazi/p/9724453.html

ant-design-vue 表单报错位置提示

qq_38942507的博客

07-05

418

ant-design-vue表单报错位置定位

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="请输

前端输入框校验规则rules在切换tabs后如何去掉提示语

11-28

在前端，特别是使用Vue.js或React等MVVM框架时，如果你使用了表单验证库如VeeValidate (Vue) 或 Formik (React)，当用户切换 tabs 并离开当前有验证规则的 input 元素时，你需要处理`v-model`或类似的数据绑定，并管理验证状态。 1. **Vue.js** 中，可以利用 VeeValidate 的 `pristine` 和 `touched` 属性。当你切换 tabs 后，如果用户未修改该 input，则设置其为初始状态 (`this.$refs.yourInput.pristine = true;`) 和未触达 (`this.$refs.yourInput.touched = false;`)，这样验证错误提示会自动清除。 ```javascript watch: { '$data.yourField': { handler(newValue, oldValue) { if (!newValue && !this.$refs.yourInput.$invalid) { this.$refs.yourInput.pristine = true; this.$refs.yourInput.touched = false; } }, deep: true, }, }, ``` 2. **React** 中，Formik 提供了类似的机制。你可以监听 form 或 field 的 `handleChange` 和 `handleBlur` 事件，在 `handleBlur` 中检查输入是否为空，如果是则清除错误： ```jsx const { touched, pristine } = useFormikContext().formValues; useEffect(() => { if (!touched[yourField] && pristine[yourField]) { // 清除错误提示 setErrors({ [yourField]: '' }); } }, [touched, pristine, yourField]); ``` 在以上两种情况中，记得在你的输入框上设置适当的`v-model`或`ref`，以便触发这些操作。同时，`rules`应该包含一个验证函数，在用户提交表单时判断输入是否有效。