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

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

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

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

weixin_49203377
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element表单选择器失去焦点的表单校验
qq_47410017的博客
09-28 1003
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)">
vue elementui form表单验证的实现
10-17
总结起来，Vue配合Element UI实现表单验证，需要理解并运用好`<el-form>`、`<el-form-item>`等组件的使用，掌握如何定义和绑定`rules`验证规则，并且学会编写自定义验证函数来处理业务逻辑中的特殊验证需求。...
VUE Element-UI el-table 表单提交验证失败自动获取焦点
qq_43561840的博客
03-27 1446
VUE Element-UI Form 表单提交验证失败自动获取焦点 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //do something } else { // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题...
element 修改表单值后表单验证无效_element 表单自定义校验规则
weixin_39528289的博客
11-23 1216
首先在我们的vue + element 项目中，尤其是后台有关的项目或者涉及到大量操作数据的平台，重中之重的就是关于数据的验证，也就是关于我们表单的验证，如果在前端做好了这些，相当于在前后台交互数据的时候，提前设置了一道门槛，强制加了一把锁，这样就不会因为一些小的失误（空白数据的提交，不符合逻辑规则的数据的提交）浪费我们的数据库内存，导致大量的数据冗余，那么在vue和Element 中我们的数据验...
vue+elementUI的input输入框使用自定义验证规则不生效
m0_62381210的博客
07-13 712
验证规则配置
element 修改表单值后表单验证无效_从表单校验看JavaScript策略模式的使用
weixin_39898248的博客
11-29 244
众所周知的是，表单确实在前端，唔，或者说在网页中占有不小的比重。事实上，几乎每一个中大型网站都会有“登录注册”以验证用户信息、防止一些不可名状的隐患。。。那么表单的优劣就成了前端开发者急需解决的问题。其实我更愿意称为“代码的可读性”或“可复用性”以及“是否冗杂”。表单也有“优劣”？你在开玩笑嘛？我想你可以认真看下下面的代码，它用到了一些“新知识”：<用户名、密码、手机号这应该是表单中最常见的...
vue+elementUI实现表单和图片上传及验证功能示例
10-17
整个示例通过一个具体的实现案例将上述概念和知识点结合起来，展示了如何在Vue项目中使用Element UI构建表单，并集成了图片上传和验证功能。代码通过实例化组件、传入props、监听事件等步骤组织，最终实现了一个界面...
详解ElementUI之表单验证、数据绑定、路由跳转
08-30
在ElementUI中，表单验证是通过el-form组件和el-form-item组件实现的。el-form组件是表单的容器，而el-form-item组件是表单项的容器。每个el-form-item组件都可以指定一个prop属性，该属性指定了该表单项的验证规则...
表单验证自定义验证规则和错误信息
06-30
在Web开发中，表单验证是必不可少的一部分，它确保用户输入的数据符合预设的规则，从而维护数据的完整性和安全性。本主题将深入探讨“表单验证自定义验证规则和错误信息”，帮助开发者构建更加灵活、用户体验良好的...
Vue ElementUI之Form表单验证遇到的问题
08-29
Vue ElementUI之Form表单验证遇到的问题 Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决...
elementUI表单校验失败后定位到具体的input聚焦
qq_43340606的博客
02-21 1496
场景: 如下图, 在出现滚动条的情况下, 当点击保存按钮校验失败后, 用户看不到具体的校验信息的. 需要手动像上滑动. 这样的话交互体验欠佳. 方案: 点击保存校验失败后聚焦到具体的某个input控件, 随之 滚动条也会自动上滑 具体步骤如下: 在按需加载form表单之后, 拿到validate方法. 并在其方法上判断校验失败后聚焦到具体控件的效果. 再注册到实例中 import { Form } from 'element-ui'; const components = [ .
element-ui 表单验证规则不生效原因 & 为什么使用:model
qq_37418556的博客
07-12 9819
element-ui 表单验证规则不生效原因 & 为什么使用:model 在使用element-ui的表单时，我们会看到如下代码,在el-form标签中使用 :model,在el-form-item项里面的文本框使用的是 v-model, 这里，使用:model的作用仅仅是将父组件的数据loginForm传递给子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的（如下案例）。 在表单校验中，注意要把 prop=“username” 的属性
vue el-form 遇上 v-if，表单校验不生效问题
且听风吟的博客
08-18 8196
el-form遇上v-if，表单校验不生效问题
element 修改表单值后表单验证无效_vue结合form-create组件生成动态表单
weixin_39609423的博客
11-20 517
最近制作一套体检系统，其中一个功能，根据科室检查项目来生成表单，内置到数据库中，采用静态表单不利于后期增加和维护，以及扩展，于是找到一个组件，form-create可以动态生成表单，根据不同医院维护的医疗项目来动态生成检查单，以及检查报告，适用于大部分科室了。form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结...
vue element form表单规则校验 点击提交后直接报数据库错误，没有显示错误信息
weixin_54348877的博客
07-29 699
写的跟上面官方文档基本一致，后面发现是this.$refs.add.validate((valid)=>{没有写在点击事件方法中，其中add是form表单的ref。
关于elementui this.$refs[“form“].validate校验消失的原因
weixin_48090015的博客
10-24 1668
在表单提交的时候遇到elementui 提交点击确认后却没有显示任何成功或者失败的信息，原因大概率是在表单中rules使用了自定义校验，而elementui中自定义校验一定要有callback()，添加之后得以提交表单。
el-form,当表格校验遇上v-if，怎样处理表格校验不生效的问题
weixin_42215833的博客
01-11 2101
1、场景 在实际工作开发中，我们在处理el-form表单校验问题时常会遇到这样一种情况：根据不同的条件，展示不同的el-form-item，这个时候我们就需要考虑表单元素的显示与隐藏。在vue中，控制显示隐藏的有两个指令：v-if和v-show。 【1】两者不同点：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 【2】原理：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基
【element-ui表单验证明明有值 都是却一直提示不能为空——转载】
最新发布
weixin_44958189的博客
10-31 1233
从上诉代码与下图中分析可以看见，prop与v-model的值不同，prop 是指我们要验证下面输入框里面最后输入进去的值是不是符合我们想要的规则 所以这个prop 后面的等号不能直接自己随便定义名称。根据elementUI文档配置了表单验证，但是在页面输入了内容后表单验证依旧提示“请输入内容”，表单验证貌似未检测到我输入的值。// 设置一个动态title，为新增与编辑时变化。// 设置一个动态title，为新增与编辑时变化。// 默认为false，新增弹窗开关。// 默认为false，新增弹窗开关。
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因
热门推荐
rudy_zhou的博客
06-08 1万+
elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因唠唠嗑如何进行验证的获取规则 源码处写法获取验证项 源码处写法上述使用中常见问题场景结语 唠唠嗑 用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。 今天就专门分享一下，看el
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、付费专栏及课程。

余额充值