使用vue+elementui进行自动验证，验证失效问题的解决

最新推荐文章于 2024-06-05 09:21:43 发布
最新推荐文章于 2024-06-05 09:21:43 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 前端开发 文章标签： javascript 正则表达式 vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiang_jiuxing/article/details/127712316
版权

首先需要拥有vue项目，本人使用vue-cli创建项目，安装的插件目录如下

vue页面代如下

 在表单中进行了v-model和规则绑定

 

 在绑定规则中validator为自定义验证规则（重点）

自定义规则如下

 在使用过程中，每一个分支都需要callback（）进行回调。

尤其是在使用if( !value ）的分支中要使用return callback()进行回调

若想有更好的用户体验，可以编写更细的校验规则，使后端接收到的信息更加规整，例如手机号的验证

 好啦，今天的分享就到这里吧，不懂的地方可以留言

北巷_东坡
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
本文将详细讲解如何在Vue+ElementUI环境中解决这个问题，即在关闭对话框时清空验证和清除表单数据。 首先，我们需要在对话框的取消按钮上添加一个点击事件，例如： ```html ('addGroupData')">取消 ('...
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
Element-ui打开表单自动验证问题的解决
weixin_43120901的博客
07-24 2956
记录下地址，免得以后自己还要找 https://www.jianshu.com/p/46d119a2c94c
elementUI表单验证遇到的问题
Leeyy
03-07 721
属性：<el-input v-model="addForm.dutyTime" style="width: 60%" :disabled="true"></el-input>关键在prop这个属性，表单域没写prop属性，像是我能干出来的事，每次隔很久不干活就会忘记一些属性的作用，老想删除 （见不得一点冗余代码，bushi）b.借鉴前面的代码片段，改为 { required: true, message: "请输入质保期", trigger: "blur" },（无用）
两种方法解决 this 在validator中不能使用
最新发布
油墨香^-^的博客
06-05 43
【代码】两种方法解决 this 在validator中不能使用。
vue element表单校验失效（this.$refs[formName].validate）
weixin_56204435的博客
07-07 961
【代码】vue element表单校验失效（this.$refs[formName].validate）
vue重置表单验证的问题
weixin_38395200的博客
05-13 772
记录开发中遇到的小问题 看图看图看图 提交-表单验证，关闭页面，再重新进去，这时候表单验证还在，验证没有重置 解决办法：在点击‘取消’或者‘确定’的时候 重置验证 this.$refs.elForm.resetFields() elForm 是表单的ref 这样就可以解决了。 ...
记录一个关于vue+ElementUI的表单验证和重置的无效的错误
zongzi_13595345262的博客
08-17 532
记录一个关于vue+ElementUI的表单验证和重置的无效的错误 博主自学vue和ElementUI的过程中自己写了一个登陆页面，该页面有自动校验和重置表单的功能。 代码如下： <!-- 表单区域 --> <el-form ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form" :model="loginForm"> <!-- 用户名 --&gt
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
基于springboot+vue+elementui的办公自动化系统设计，优秀毕业系统，新手必看！
05-08
3、办公自动化： (1)行政办公： + 查看自己的工作任务； + 新建工作任务； + 设定任务截止时间； + 分配下级员工任务；（权限） (2)审批申请： + 查看员工状态（是否请假，出差等）；（权限） + 批准下级员工的...
基于vue + elementUI的管理系统模板
02-22
- **状态管理**：Vuex是Vue.js的状态管理模式，用于集中管理应用的状态，解决组件间通信的问题。 - **API接口调用**：通过axios或fetch等库与后端API进行数据交互，实现CRUD操作。 - **权限控制**：对于管理系统...
vue el-form表单嵌套组件时正则校验不生效
weixin_45563734的博客
11-21 552
el-form表单嵌套组件时，正则校验不生效，组件选中数据后，正则提示不消失
若依前后端分离项目，this.$refs[formName].validate((valid) =＞{} 无效，vue验证表单无效
HUQWSYK的博客
08-31 613
若依前后端分离项目中，this.$refs[formName].validate((valid) =>{} 无效的问题，当验证通过的时候点确定按钮没有报错，也没有任何反应。
elementUI表单验证失效解决办法
qq_15038701的博客
05-01 1808
<el-form :model="signForm" status-icon :rules="formRule" ref="signForm" label-width="100px"> </el-form> formRule验证规则为： formRule: { sign_name: [ {required: true, message: '请输入签到名称', trigger: 'blur'} ] .
关于vue element-ui form表单重置时遇到的问题 resetFields方法提前执行
m0_72663698的博客
03-29 743
但我使用过这个方法后发现这个方法在我子传父this.$emit操作之前就执行了，这个方法提前把握的表单数据给清空了，导致我的表单数据被清空从而没有传到父组件 ，于是我在网上查阅大量相关文章，也没找到相关的资料，只发现这个问题的出现是执行顺序导致的问题，在下面加了this.$nextTick方法可以暂时解决这个问题，但是感觉并不规范，后来我又找到了一个方法。在做表单提交的时候遇到了个奇怪的问题，我提交表单要把表单的数据传递给父组件，在提交过后有一个重置表单的操作，以下是我一开始用的清空表单的方法。
vue elementUI组件表单动态验证失效的问题与解决办法
Yongqiang Chen的博客
10-15 9267
一、缘由 在项目中，有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。 二、第一次实现与遇到的问题 比如银行卡号根据输入年龄进行判断，如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules，然后通过三元表达式赋值prop属性，实现动态验证，示例如下： <template> <el-form ref="ruleForm" :model="formData" :rules="rules"> <el-form-item
Element plus之el-form表单验证失效+动态表单验证+多层级对象属性验证方案
热门推荐
visket2008的专栏
10-18 1万+
旨在解决项目过程中遇到触发el-form验证失效，多级对象属性如何编写验证规则，动态表单控件如何处理。
vue的rules验证失效,部分可以部分又失效的原因
weixin_42947972的博客
11-05 1784
很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效。
vue+elementui动态切换验证规则
05-10
Vue和ElementUI都是非常流行的前端开发框架，它们可以让我们更加便捷地开发前端应用。其中，ElementUI提供了非常多的表单验证规则，可以让我们在表单输入时对用户的输入进行验证，增强了用户输入的可靠性和安全性。但是，有时候我们需要根据不同的表单输入，动态地切换验证规则，以达到更加灵活的表单验证效果。那么，该如何实现动态切换验证规则呢？ 首先，在Vue中我们可以通过v-if和v-else来切换不同的验证规则。例如： <template> <el-form ref="form" :model="formData" :rules="rules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age" placeholder="请输入年龄"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: { name: '', age: '' }, rules: { name: [ {required: true, message: '请输入姓名', trigger: 'blur'} ], age: [ {required: true, message: '请输入年龄', trigger: 'blur'} ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功') } else { alert('验证失败') return false } }) } } } </script> 在上面的代码中，我们定义了一个包含两个输入框（姓名和年龄）的表单，并根据不同的用户输入动态切换了验证规则。其中，rules是验证规则对象，包含了每个表单元素对应的验证规则。当我们需要根据输入内容动态切换规则时，只需要在对应的表单元素上设置v-if和v-else指令来切换不同的验证规则即可。 总之，在Vue和ElementUI中动态切换验证规则的原理就是利用Vue的特性动态切换v-if和v-else指令来实现，以满足不同的表单验证需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值