Vue+Element-UI开发问题解决：如何表单验证；输入框失去焦点还有错误信息

最新推荐文章于 2024-04-01 11:07:05 发布

小贤_log

最新推荐文章于 2024-04-01 11:07:05 发布

阅读量4.9k

点赞数 1

分类专栏：前端页面文章标签： vue elementui

本文链接：https://blog.csdn.net/zxh_log4j/article/details/113524544

版权

本文主要介绍了在Vue+Element-UI开发中遇到的表单验证问题，重点是当输入框失去焦点后错误信息仍然显示的情况。通过设置`ref`来获取表单对象，使用`model`确保表单数据绑定，并结合`rules`定义校验规则，以及正确设置`prop`以关联验证属性，可以有效解决这个问题。

摘要由CSDN通过智能技术生成

Vue+Element-UI的表单验证，注意的点有以下：

ref ：该属性相当于一个id，可以获取该表单对象
model ：不设置该属性，失去焦点后错误消息还会继续存在
rules ：绑定校验的规则
prop ：关联规则设置的属性

Vue实例：

var vue = new Vue({
   
        el: '#app',
        data: {
   
            //表单数据
            formData: {
   },
            //校验规则
            rules: {
   
                code:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小贤_log

关注关注

1
点赞
踩
6

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue项目中使用正在失去焦点事件并对输入框进行正则校验

123

07-05

4541

vue项目中使用正在失去焦点事件并对输入框进行正则校验

vue-element-nocode-admin:element-ui 的代码可视化编辑

05-06

element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...

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

elementUI表单验证遇到的问题

Leeyy

03-07

985

属性：<el-input v-model="addForm.dutyTime" style="width: 60%" :disabled="true"></el-input>关键在prop这个属性，表单域没写prop属性，像是我能干出来的事，每次隔很久不干活就会忘记一些属性的作用，老想删除（见不得一点冗余代码，bushi）b.借鉴前面的代码片段，改为 { required: true, message: "请输入质保期", trigger: "blur" },（无用）

element-ui 表单校验，失去焦点/框内值改变，校验

最新发布

szzlh123456789的博客

04-01

1113

前提：在el-form表单中，框中有值，失去焦点或者框内值改变的时候，校验提示，依旧没有消失el-select校验失效问题。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）form表单里面，el-select会出现失效的情况，尤其是我这个el-foem-item 里面又嵌套了。奇怪的是，我表单里面有三个el-select，其他两个生效了，只有另外一个没有生效。

element-ui之坑一：表单焦点离开验证提示

qq_48729513的博客

10-10

1121

在写当鼠标焦点离开输入框提示模块时，表单验证“是否有内容” 和 “输入的字符长度” 提示；提示字符一直是rules里面的第一条信息这里是prop绑定的值的问题，在data里与username 和 password双向数据绑定的值，要与prop绑定在rules里的变量值相同 ...

Element学习之表单验证输入框提示不消失

qq_41720578的博客

05-26

4622

在学习Element UI时碰见了一个让人头疼的问题，碰巧发现输入框提示信息一直消失几经辗转才找到错误，最后发现原来是 el-form-item中的prop 要与 el-input中v-model绑定的值一致。仔细一样，不一致他那上验证去，所以才会一直提示。 <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> .

解决vant一些样式问题（持续更新）

qq_45208029的博客

05-24

1140

1.field 1.1修改field中placeholder的样式问题 .van-field__control::-webkit-input-placeholder { font-weight: 400; }

elementUi处理下拉框失去焦点时依旧不关闭问题

weixin_41184005的博客

05-08

1382

添加ref绑定字段，增加方法@blur=“closeOptions”，然后和在js中增加方法。

input框失焦bug问题解决

wyzh2000的博客

07-24

1223

本文主要讲解input框失焦时事件触发时可能造成的bug与解决方案

VUE3- ant design自动校验，明明输入框都输入内容了，还是显示提醒

m0_59214979的博客

10-10

3580

本节：ant design自动校验，明明输入框都输入内容了，还是显示提醒。

Element表单输入框失焦向服务端验证(Vue实现)

布克吉的博客

09-18

762

主要原理通过rules中的validator 函数回调实现，CheckAttributes为接口函数，根据请求结果判断输入框内容是否已存在，再通过callback(new Error('数据已存在的提示词')))：无论返回结果是什么，都要加上else{ callback() } 形成一个闭环，前言：一般情况下，表单的作用为：输入数据->正则验证格式->提交到后端数据验证。而遇到输入项较多时，如果费老大劲把数据填完，提交返回。本文介绍表单输入数据，失焦立即验证内容。

基于vue2.0 +vuex+ element-ui后台管理系统.rar

02-20

Element-UI 是一套基于 Vue 2.0 的企业级UI组件库，提供了丰富的表单组件、布局工具、导航组件等，极大地提高了开发效率。在后台管理系统中，Element-UI的应用包括： 1. **表格组件**：用于展示数据，支持排序、筛选...

Vue ~ element-ui 动态表单验证，支持添加和删除操作

07-27

本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...

Vue+Element-UI实现登录表单：集成随机验证码与验证功能

总结来说，要在vue项目中实现登录页面的验证码验证，需要自定义一个canvas组件生成随机验证码，然后在表单中集成该组件并添加对应的验证规则。在用户输入验证码后，验证其正确性以确保安全登录。通过以上步骤，即可...

vue项目把软键盘收起 input失去焦点

qq_39598092的博客

06-12

2620

html： <input type="text" placeholder="请输入要搜索的内容" v-model="value" @keypress="keyFn" ref="input1"> js: keyFn(e) { if (e.keyCode === 13) {//软件盘上的确认按钮 this.$refs.input1.blur(); } }, ...

＜van-field 失去焦点后，就自动清空输入框了，大bug

yuan_618859的博客

12-04

7896

vant的van-field输入框自动清空bug

vue项目 input标签失去焦点，页面出现空白区域

zax533716144909的博客

08-29

1110

最近在做的是微信抢红包功能微信打开链接的页面中 input标签在失去焦点的时候会出现空白区域（空白区域大小是软键盘大小）需要下拉才能显示完整页面 <input class="num_input" v-model="phone" type="text" placeholder="请输入账号手机/邮箱" @blur="viewRestore"> viewRestore() { ...

Vue事件总线的理解

qq_34442584的博客

11-12

189

class Bus { constructor() { this.callbacks = {} } //注册事件 $on(name, fn) { this.callbacks[name] = this.callbacks[name] || [] this.callbacks[name].push(fn) } //触发所监听的事件 $emit(name, args) { //判断是否有这个事

解决Element-ui el-cascader在失去焦点时校验

felicity_zll的博客

03-31

5247

一、问题描述：我想实现，在cascader级联选择器，失去焦点时候，如果没有选择省市区则提示valid信息；更改前：二、问题解决在规则配置的时候，级联框 trigger: 'blur‘ 触发不了，只能选择 trigger: 'change'触发; 具体解决方案如下：（添加cascader失去焦点事件，在失去焦点事件中添加validField 方法只验证 address） //级联框代码 <el-form-item label="省/市/区" prop="address"&g