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

最新推荐文章于 2024-04-01 11:07:05 发布
最新推荐文章于 2024-04-01 11:07:05 发布
阅读量4.7k 收藏 6
点赞数 1
分类专栏： 前端页面 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxh_log4j/article/details/113524544
版权

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

  1. ref ：该属性相当于一个id，可以获取该表单对象
  2. model ：不设置该属性，失去焦点后错误消息还会继续存在
  3. rules ：绑定校验的规则
  4. prop ：关联规则设置的属性
    在这里插入图片描述
    Vue实例：
var vue = new Vue({
   
        el: '#app',
        data: {
   
            //表单数据
            formData: {
   },
            //校验规则
            rules:
最低0.47元/天 解锁文章
小贤_log
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue项目中使用正在失去焦点事件并对输入框进行正则校验
123
07-05 4438
vue项目中使用正在失去焦点事件并对输入框进行正则校验
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
Element学习之表单验证输入框提示不消失
qq_41720578的博客
05-26 4459
在学习Element UI时碰见了一个让人头疼的问题，碰巧发现输入框提示信息一直消失 几经辗转才找到错误，最后发现原来是 el-form-item中的prop 要与 el-input中v-model绑定的值一致。仔细一样，不一致他那上验证去，所以才会一直提示。 <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> .
element-ui 表单校验，失去焦点/框内值改变，校验
最新发布
szzlh123456789的博客
04-01 609
前提：在el-form表单中，框中有值，失去焦点或者框内值改变的时候，校验提示，依旧没有消失el-select校验失效问题。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）form表单里面，el-select会出现失效的情况，尤其是我这个el-foem-item 里面又嵌套了。奇怪的是，我表单里面有三个el-select，其他两个生效了，只有另外一个没有生效。
element-ui之坑一：表单焦点离开验证提示
qq_48729513的博客
10-10 1024
在写当鼠标焦点离开输入框提示模块时，表单验证“是否有内容” 和 “输入的字符长度” 提示；提示字符一直是rules里面的第一条信息 这里是prop绑定的值的问题，在data里与username 和 password双向数据绑定的值，要与prop绑定在rules里的变量值相同 ...
elementUi处理下拉框失去焦点时依旧不关闭问题
weixin_41184005的博客
05-08 1046
添加ref绑定字段，增加方法@blur=“closeOptions”，然后和在js中增加方法。
input框失焦bug问题解决
wyzh2000的博客
07-24 772
本文主要讲解input框失焦时事件触发时可能造成的bug与解决方案
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
- Element Plus是Element UI的下一代，它是基于Vue 3的组件库，包含一系列丰富的UI组件，如表格、按钮、输入框等，用于快速构建前端界面。 - 在Vue Form Generator中，Element Plus提供了一套统一的样式和交互，...
vue-element-model:vue2.X + element-ui
04-02
"vue-element-model:vue2.X + element-ui" 指的是使用 Vue 2.x 版本与 Element-UI 结合创建的项目模型。 首先，让我们深入了解一下 Vue 2.x。Vue 2.x 是 Vue.js 的第二个主要版本，它引入了许多改进和优化，包括...
vue+element-ui表格封装tag标签使用插槽
01-19
在element-ui中添加tag很简单，最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。 插槽 省去官方的复杂讲解和代码，插槽的意思简单来说，就是在子组件的某个地方留一个占位符，当父组件使用这个子...
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
VUE3- ant design自动校验，明明输入框都输入内容了，还是显示提醒
m0_59214979的博客
10-10 3245
本节：ant design自动校验，明明输入框都输入内容了，还是显示提醒。
Element表单输入框失焦向服务端验证(Vue实现)
布克吉的博客
09-18 595
主要原理通过rules中的validator 函数回调实现，CheckAttributes为接口函数，根据请求结果判断输入框内容是否已存在，再通过callback(new Error('数据已存在的提示词')))：无论返回结果是什么，都要加上else{ callback() } 形成一个闭环，前言：一般情况下，表单的作用为：输入数据->正则验证格式->提交到后端数据验证。而遇到输入项较多时，如果费老大劲把数据填完，提交返回。本文介绍表单输入数据，失焦立即验证内容。
Vue事件总线的理解
qq_34442584的博客
11-12 147
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 4833
一、问题描述： 我想实现，在cascader级联选择器，失去焦点时候，如果没有选择省市区则提示valid信息； 更改前： 二、问题解决 在规则配置的时候，级联框 trigger: 'blur‘ 触发不了，只能选择 trigger: 'change'触发; 具体解决方案如下：（添加cascader失去焦点事件，在失去焦点事件中添加validField 方法只验证 address） //级联框代码 <el-form-item label="省/市/区" prop="address"&g
elementui中input失去焦点时调api校验输入的内容是否存在
qq_50386946的博客
06-11 751
elementui中input失去焦点时调api校验输入的内容是否存在 <el-form :model="form" ref="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model='form.name' @blur='handleBlur("name")'></el-input> </el-form-item> <el-form-ite
element & vue trigger: blur输入内容后任然提示
qq_34558909的博客
05-25 5030
检查: 一_rules ref <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> 二 prop值与绑定的属性一致 <el-form-item label="名称" prop="archiveName"> 三 绑定属性 addFormRules: { archiveName: [ { required: true, messa
ElementUI实现表单校验
热门推荐
David_house的博客
03-28 1万+
步骤 1.给表单el-form添加校验规则字段rules并动态绑定一个对象（对象可自定义，我这里定义为rules） 2.在script里面加入rules对象，并将要校验的字段写进去，格式固定 #eg：message的值可以自定义，blur表示表单失去焦点触发校验 username:[{required:true,message:'请输入用户名',trigger:'blur'}], 3.添加prop属性，在对应的el-form-item标签上我们让prop等于rules里面对应的字段值 上述三步操作表单校验
使用vue+element-ui 写一个表单弹出层
04-28
5. 在 `submitForm` 方法中，调用 `this.$refs.form.validate` 方法进行表单验证，验证通过后提交表单数据。 6. `v-model.number` 可以将输入框的值转为数字类型。 希望这个示例能够帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值