elementui中的表单的验证规则和自定义验证规则不生效的问题

最新推荐文章于 2024-01-02 14:42:43 发布
最新推荐文章于 2024-01-02 14:42:43 发布
阅读量1.3k 收藏 2
点赞数 2
分类专栏： vue遇到的问题 elementui的使用 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49203377/article/details/122172927
版权

背景:在使用elementui中的表单验证规则，发现当输入框为空的时候，鼠标失焦的时候会提示信息（不能为空），但是当输入了内容再失焦的时候还是提示该项不能为空，并没有生效
在这里插入图片描述
解决办法如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

weixin_49203377
关注
专栏目录
vue+elementUI实现表单和图片上传及验证功能示例
10-17
整个示例通过一个具体的实现案例将上述概念和知识点结合起来，展示了如何在Vue项目中使用Element UI构建表单，并集成了图片上传和验证功能。代码通过实例化组件、传入props、监听事件等步骤组织，最终实现了一个界面...
element 表单使用校验 校验失效问题
paidaboluo的博客
08-17 9834
element 表单使用校验 校验失效问题
elementUI 表单自定义校验规则无法校验及解决方案
InterestAndFun的博客
12-17 7073
快速解答 简单解答一下，这是因为绑定的值有问题。prop绑定的只能是 :model 绑定的值的下一层，而不能是下下层。这里猜测是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。 前言 接了个需求：在elementUI中，有一个表单，其中有一项是选择时间。时间这栏又不单只有输入框，后面还要有个单位，我需要校验用户输入的时间不能低于20秒。我们知道elementUI的表单校验也已经很完善了【完整校验规则】，能应付绝大部分场景。但是局限于单个item的校验，对于我这种组合校验的需求，只能自定
element ui表单验证规则不生效的原因
tl_code的博客
01-30 1660
element ui表单验证规则不生效的原因
elementUI中表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验；
CuiCui_web的博客
06-19 3365
现在有这样一个变态的需求吧，在elementUI表单校验中，所有空值校验在用户点击“确定”按钮时才触发，失去焦点时只有有值，才进行其它有效性校验； 也就是说，必填项为空，我失去焦点，是不能给出提示的，表单也不能标红；失去焦点只能校验其他规则，比如邮箱格式，手机号格式等；当我点击提交或确定按钮，所有的为空的表单给出提示，且标红。 下图为效果图： 如果你看过elementUI底层源码，你就知道这个校验规则是用的第三方开源库，async-validator 当你在规则中写入{ required: true,
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因
热门推荐
rudy_zhou的博客
06-08 1万+
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因唠唠嗑如何进行验证的获取规则 源码处写法获取验证项 源码处写法上述使用中常见问题场景结语 唠唠嗑 用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。 今天就专门分享一下，看el
vue elementui form表单验证的实现
10-17
总结起来，Vue配合Element UI实现表单验证，需要理解并运用好`<el-form>`、`<el-form-item>`等组件的使用，掌握如何定义和绑定`rules`验证规则，并且学会编写自定义验证函数来处理业务逻辑中的特殊验证需求。...
详解ElementUI之表单验证、数据绑定、路由跳转
08-30
在ElementUI中，表单验证是通过el-form组件和el-form-item组件实现的。el-form组件是表单的容器，而el-form-item组件是表单项的容器。每个el-form-item组件都可以指定一个prop属性，该属性指定了该表单项的验证规则...
layui lay-verify form表单自定义验证规则详解
10-16
在IT领域，表单验证是前端开发中常见且重要的一环，它确保用户输入的数据符合要求，保证数据的质量和应用的稳定性。layui作为一个流行的前端UI框架，为开发人员提供了丰富而便捷的组件和功能，其中lay-verify模块...
表单验证自定义验证规则和错误信息
06-30
在Web开发中，表单验证是必不可少的一部分，它确保用户输入的数据符合预设的规则，从而维护数据的完整性和安全性。本主题将深入探讨“表单验证自定义验证规则和错误信息”，帮助开发者构建更加灵活、用户体验良好的...
element表单选择器失去焦点的表单校验
qq_47410017的博客
09-28 1062
element表单选择器失去焦点的表单校验 为什么会出现这个问题？ 我们给item和select都绑定上失去焦点事件，我们来打印一下结果看看是1还是2 <el-form-item @click="aaa" label="活动区域" prop="region" @blur="ningmengla(1)"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域" @blur="ningmengla(2)">
解决element 表单验证不通过的俩大坑
qq_44162778的博客
06-25 4000
本文章解决本人项目中遇到的俩大坑（希望对遇到同样问题的你们有帮助） 问题场景： 在封装的表单组件中实现非空验证 问题描述： 1、修改时失去焦点时验证有作用 然后点击表单提交验证没作用，不管有没有内容，验证都通过 2、添加时输入了内容，检查了 :model,prop,ref等都没有问题，但是始终验证不通过提示不能为空 3、添加表单验证通过了后，点击提交时对象中的属性全部为空值了 解决问题： 1、第一个问题导致提交验证失效的原因是因为我嵌套了两层el-form标签导致的（我觉得应该是因为有两层el-form 导
解决在vue中使用elementUI自定义校验及点击提交不生效问题
明思齐的博客
04-22 6530
本章讲述的主要是对身份证号码的校验及为何校验了但提交不生效问题。🍀1、身份证号码（二代18位身份证）的含义1️⃣ 1-2位：代表所属省级政府的代码；2️⃣ 3-4位：代表所在的地、市级政府代码；3️⃣ 5-6位：代表所在区、县级政府代码；4️⃣ 7-10位：代表身份证持有人的出生年份；5️⃣ 11-12位：代表身份证持有人的出生月份；6️⃣ 13-14位：代表身份证持有人的出生当月日期；7️⃣ 15-16位：代表身份证持有人在当地的顺序码（所在地的派出所的代码）；
Element 表单验证绑定元素后发现rule不生效，required必填报错，input内填了值也报错
m0_55835540的博客
07-23 5257
遇到element 表单验证 绑定后无论输入与否都会提示内容必填
vue＋elementui表单校验没有效果
前端_大可爱的博客
02-05 3280
在点击提交之前应该保证输入框中用户填入了数据，所以使用elementUI中的rules进行校验 本人遇到的问题; 即使填入了数据还是显示没有数据 本人的书写错误在于 el-form-item中的prop与el-input所绑定的不是名字不一致： 正确的应该如下： rules为校验规则 ref和model都是必须要有的 :model="loginForm"中loginFrom应是一个对象 在dat...
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 6189
的问题，我就将
element 修改表单值后表单验证无效_vue结合form-create组件生成动态表单
weixin_39609423的博客
11-20 553
最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结...
Element-ui自定义input框非空校验
最新发布
qq_41238459的博客
01-02 1380
element-ui自定义input框非空校验
vue element form表单规则校验 点击提交后直接报数据库错误，没有显示错误信息
weixin_54348877的博客
07-29 745
写的跟上面官方文档基本一致，后面发现是this.$refs.add.validate((valid)=>{没有写在点击事件方法中，其中add是form表单的ref。
elementui自定义表单验证规则
07-14
在 Element UI 中，可以通过自定义验证规则来验证表单输入的数据。面是一个示例代码，演示何自定义验证规则： ```javascript // 导入 Element UI 的验证规则方法 import { validate } from 'element-ui' // 自定义验证规则 const customRules = { // 自定义规则名称：验证函数 customRule1: (rule, value, callback) => { if (value === 'custom') { callback(new Error('自定义规则1验证失败')) } else { callback() } }, customRule2: (rule, value, callback) => { if (value.length < 5) { callback(new Error('自定义规则2验证失败')) } else { callback() } }, } // 在表单中使用自定义验证规则 <el-form :rules="customRules"> <el-form-item label="自定义规则1"> <el-input v-model="input1"></el-input> </el-form-item> <el-form-item label="自定义规则2"> <el-input v-model="input2"></el-input> </el-form-item> </el-form> ``` 在上面的代码中，我们首先导入了 Element UI 的验证规则方法 `validate`。然后定义了两个自定义验证规则 `customRule1` 和 `customRule2`，这两个规则分别对输入的值进行验证，并根据验证结果调用回调函数 `callback`。当验证失败时，使用 `new Error()` 创建一个错误对象，并传递给回调函数；当验证通过时，直接调用回调函数即可。 最后，在表单中使用自定义验证规则时，将自定义规则对象 `customRules` 通过 `:rules` 属性传递给 `el-form` 组件。在每个需要验证的表单项中，通过 `v-model` 绑定输入的值，然后在 `el-form-item` 组件中添加相应的标签和验证提示信息。 这样，当用户输入的值不符合自定义的验证规则时，Element UI 会自动显示相应的错误提示信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值