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

作者:CODE-YL 时间:2024-04-09 10:48:37 

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

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

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

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

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

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

解决方法的步骤

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

2.表单验证失败的问题

表单验证规则

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

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

1.1.填写required:true

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

1.2.不填required:true

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

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

自定义校验函数

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

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

来源:https://blog.csdn.net/weixin_53716093/article/details/128742094

标签:el-input,无法输入,表单验证
0
投稿

猜你喜欢

  • 详解Python中的Descriptor描述符类

    2021-10-16 10:10:35
  • pytorch 实现删除tensor中的指定行列

    2023-05-22 14:26:26
  • PHP字符串中提取文件名的实例方法

    2023-06-12 18:57:32
  • mysql数据库备份及恢复命令 mysqldump,source的用法

    2024-01-22 21:05:10
  • python如何在pygame中设置字体并显示中文详解

    2021-03-21 13:32:50
  • perl哈希hash的常见用法介绍

    2023-08-12 18:46:59
  • Vue循环组件加validate多表单验证的实例

    2024-05-05 09:23:39
  • Python使用matplotlib绘制三维参数曲线操作示例

    2021-03-30 05:55:31
  • python 字典(dict)遍历的四种方法性能测试报告

    2023-08-21 21:27:08
  • 15款Python编辑器的优缺点,别再问我“选什么编辑器”啦

    2021-10-06 12:37:55
  • Django框架模板介绍

    2021-07-05 07:34:18
  • pycharm远程调试openstack的图文教程

    2021-10-31 06:37:56
  • 详解Python字符串切片

    2021-09-10 05:10:43
  • PyTorch中的参数类torch.nn.Parameter()详解

    2021-09-07 19:06:30
  • Python编写屏幕截图程序方法

    2022-10-04 11:11:47
  • Python分割单词和转换命名法的实现

    2023-11-24 00:06:16
  • Dreamweaver实现flash透明背景

    2008-05-04 09:35:00
  • Python爬取当网书籍数据并数据可视化展示

    2023-11-20 11:31:14
  • Python异常继承关系和自定义异常实现代码实例

    2023-06-22 07:34:44
  • mysql 5.7.20常用下载、安装和配置方法及简单操作技巧(解压版免安装)

    2024-01-15 17:21:24
  • asp之家 网络编程 m.aspxhome.com