element 验证出现英文_Element-ui中自动验证问题的解决

news/2024/7/10 3:02:07 标签: vue, js, html

Element-ui中的el-form组件自带了验证功能,方便了我们的开发。然而,在开发中经常会遇到一些莫名其妙的问题,比如表单一出来就触发了验证、验证提示出现英文等等。通过查看源代码的方式,我终于找到了问题的根源,也有了解决方法。

在我的项目的一个页面中,需要弹出表单框并填入旧数据。然而,我只要拿到旧数据并赋值到表单上时,就会触发el-form的验证,非常恼人。顺着调用栈(下图)我们可以发现是el-form-item组件的一个叫onFieldChange的方法触发了validate。应该是我们每次给表单绑定的变量重新赋值时,即赋值旧值时,触发了el.form.change事件,从而触发了表单验证。

验证结果调用栈

于是,我们可以把验证方式从所有(默认)改成只在blur时才触发,这样就避免了赋值时触发change导致的验证。

然而,新的问题接踵而至,现在打开弹框不仅验证没有消失,验证结果还出现了英文提示:

英文提示

这是为什么呢?我在validate方法里面打断点,发现rules出现了一个{ required: true },然而我并没有加这个验证条件。很明显这个验证条件没带message,导致出现了英文。

往前追踪,在getRules里面发现了这个坑的来源:如果el-form-item组件设置了required属性为true,就会加上这条坑爹的验证,产生英文提示。嗯,把el-form-item的required属性去掉就好了。

现在问题圆满解决,总结一下就是:el-form-item组件千万不要使用required属性(这个属性的初衷难道就是为了坑中文开发者的吗);验证最好要加上trigger: ‘blur’,不然每次赋值都会触发验证。


http://www.niftyadmin.cn/n/1562800.html

相关文章

根据文字计算出label的高度

ios7.0之前用: [strtestsizeWithFont:ContentFontconstrainedToSize:CGSizeMake(ScreenWeight -20, 1000) lineBreakMode:NSLineBreakByWordWrapping]; ios7之后 CGRect frame [strtestboundingRectWithSize:CGSizeMake(220,1000) options:NSStringDrawingUsesLine…

HTTP协议中Content-Length的详细解读

Content-Length用于描述HTTP消息实体的传输长度the transfer-length of the message-body。在HTTP协议中,消息实体长度和消息实体的传输长度是有区别,比如说gzip压缩下,消息实体长度是压缩前的长度,消息实体的传输长度是gzip压缩后…

Tomcat7项目迁移到Tomcat8中文乱码问题

2019独角兽企业重金招聘Python工程师标准>>> 1. 问题描述 Tomcat7下项目切换到Tomcat8后,出现乱码。 无论Google还是百度,多数解决方法是server.xml设置URIEncoding"UTF-8"。 对于Tomcat7下遇到乱码问题,这样配置是正确…

大数据的理解,大数据是什么,大数据能干什么?

一、概念: 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流转、多样的数据类型和价值密度低四大特征。 大数据的本质就是一大堆结构化的和非结构化的数据。因为数据量太大&…

Python3与OpenCV3.3 图像处理(十七)--图像梯度

一、什么是图像梯度 可以把图像看成二维离散函数,图像梯度其实就是这个二维离散函数的求导: 图像梯度: G(x,y) = dx i + dy j; dx(i,j) = I(i+1,j) - I(i,j); dy(i,j) = I(i,j+1) - I(i,j); 其中,I是图像像素的值(如:RGB值),(i,j)为像素的坐标。 图像梯度一般也可以用中值…

CSS3属性 transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(附代码)

转载文章地址:https://blog.csdn.net/qq_37968920/article/details/82391671

Python3与OpenCV3.3 图像处理(十八)--Canny边缘提取

一、什么是边缘检测 图像的边缘检测的原理是检测出图像中所有灰度值变化较大的点,而且这些点连接起来就构成了若干线条,这些线条就可以称为图像的边缘。 二、canny 算法五步骤 高斯模糊灰度转换计算梯度非最大信号抑制高低阈值输出二值图像三、示例代码 import cv2 as cv imp…

listview加载性能优化ViewHolder

在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要…