el-input无法输入的问题和表单验证失败问题解决

目录
  • 1.el-input无法输入的问题
    • 原因1、el-input组件没有绑定双向响应式数据(v-model)
    • 原因2、组件嵌套太深还是该组件是一个坑(具体原因不清楚，只知道解决方法)
    • 解决方法的步骤
  • 2.表单验证失败的问题
  • 总结

1.el-input无法输入的问题

原因1、el-input组件没有绑定双向响应式数据(v-model)

解决方案:在data中定义一个变量，然后在el-input组件中使用v-model进行双向数据绑定，这样子就会解决el-input组件无法输入的问题了。

原因2、组件嵌套太深还是该组件是一个坑(具体原因不清楚，只知道解决方法)

这时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。

解决方法的步骤

1.使用input事件，监听用户输入，如果监听输入没有问题，那与html编写无关。2.监听输入没有问题，接下来我们就使用$forceUpdate方法强制刷新，至于表单验证的问题，我们可以使用自定义表单验证来解决因为使用$forceUpdate方法而导致的表单验证失败的问题。

2.表单验证失败的问题

表单验证规则

表单验证规则(如图中的this.rules)是一个对象，你要校验的某一个变量，对应的是一个数组，数组中的trigger:"blur"是当用户失去焦点时触发，required:true，表示该参数时必选的，写入该属性后，校验的那个变量的表单项前会出现小红星，不填则不会出现。

1.1.填写required:true

1.2.不填required:true

例如：我要校验的属性是name时，在data中定义的校验规则为rules:{name:[{validator:validateForm},trigger:"blur",required:true]}，其中validateForm是自定义校验函数。

自定义校验函数

表单验证规则失败后，value的值不能用来作为我们的判断依据了，因为该值不会变化，我们应该使用model绑定的表单中的值，利用该值我们就可以自定义表单校验了。

总结

到此这篇关于el-input无法输入的问题和表单验证失败问题解决的文章就介绍到这了,更多相关el-input无法输入和表单验证失败内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue el-input输入框输入不了的解决方法

    目录 一.问题 二.解决方法 三.总结 一.问题 1.今天写代码遇到了一个很奇葩的问题:写了很多个输入框,其他输入框都没有问题,就最后一个单独处理的有问题,输入框里面输入不了东西.着实不明白为什么,一遍又一遍抱怨,重复输入,里面还是除了原有的值什么都输不了. 除了原有的3,什么都输不了 二.解决方法 1.用vue dev-tools审查了才发现这个输入框无论输入什么,value值都是不变化,尽管 也触发了input事件(和html没有关系) html的逻辑也完全相同,定义的对象的value和v-

  • Vue-element中el-input输入卡顿问题的解决

    目录 Vue-element中el-input输入卡顿 解决方法 vue遇到 el-input有时无法输入的bug 总结 Vue-element中el-input输入卡顿 最近使用Vue-element时,遇到了el-input输入卡顿问题,影响用户体验,如下 el-input是这样写的,没有加额外的事件 <el-input v-model="code" placeholder="code" type="textarea" :rows=&q

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

  • Vue使用el-input自动获取焦点和二次获取焦点问题及解决

    目录 使用el-input自动获取焦点和二次获取焦点问题 使input和el-input自动获取焦点的处理 总结 使用el-input自动获取焦点和二次获取焦点问题 最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑: 要实现的效果: 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用. 查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到. 然后使用了Vue提供的自定义指

  • Jquery表单验证失败后不提交的解决方法

    前言 这个问题经过我的整理发现是对事件的认识和js的结构没有了解清楚,return的false在onclick事件中没有返回,所以onclick之后只是显示了false值. 解决方法示例 就是一个普通的表单验证提交: <input type="botton" </code><code>onclick="javascript:checkUserInfo()"</code><code>/> checkUserI

  • 由浅入深剖析Angular表单验证

    由浅入深剖析Angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. <body ng-controller="MainController"> <form name="form" novalidate="novalidate"> <input name="text" type="e

  • JQuery表单验证插件EasyValidator用法分析

    JQuery表单验证插件EasyValidator用法分析

    本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • Laravel中使用FormRequest进行表单验证方法及问题汇总

    在`Laravel`中,每一个请求都会被封装为一个`Request`对象,`Form Request`对象就是包含了额外验证逻辑(以及访问权限控制)的自定义`Request`类. 本文分析了FormRequest异常的处理流程并提出了自定义处理FormRequest验证失败的思路. 所有示例基于Laravel 5.1.39 (LTS) 今天天气不错,我们来说说表单验证. Controller中做表单验证 有的同学把表单验证逻辑写在Controller中,例如这个对用户提交评论内容的验证: <?p

  • vue表单验证之禁止input输入框输入空格

    vue表单验证之禁止input输入框输入空格

    测试小姐姐让输入框不允许输入空格,安排. 刚开始用的下面这个方法,因为我是电脑端f12的情况下调试移动端,所以下面这个方法可以实现禁止输入空格,于是就打包测试上线了,上线后才发现真机中不支持,应该是pc端和移动端事件不一样,所以如果你是pc端,可以使用下面这个方法. input上添加下方代码(我用的vant也一样,包括elemenui等) @keydown.native="keydown($event)" methods中写入下方代码 methods:{ // 禁止输入空格 keydo

  • angular 表单验证器验证的同时限制输入的实现

    angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的 ng-model  实现双数据绑定 ng-show 根据一定的逻辑实现显示 ng-cloak 绑定在节点

  • Vue表单验证插件Vue Validator使用方法详解

    Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下 Vue版本: 1.0.24 Vue-validator版本: 2.1.3 基本使用 <div id="app"> <validator name="validation"> <form novalidate> <div class="username-field"> <label for="username

  • 基于Bootstrap+jQuery.validate实现表单验证

    基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

  • 使用vue中的混入mixin优化表单验证插件问题

    这段时间开发的时候使用到了这个表单校验插件,用起来比较麻烦就不说了,还有较严重的缺陷.自己最终还是抽空把这个插件进行了一些优化,虽然优化的方式和当初自己定下的方向不怎么相同,但是就使用体验上来说还是提高了很多. 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题,主要针对的是插件开发本身存在的问题.下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名,比较麻烦. 必须在提交表单按钮上使用 v-checkSubmit 指令进行表单校验,提交函数必须

随机推荐