首先展示正确的格式(以验证是否为空为例):
html代码块:
-
<el-form :model="nodeName(数组名)" ref="nodeName(数组名)">
-
<el-form-item prop="name(数组内的属性)" label="内容:" :rules="[{ required: true, message: '不能为空'}]">
-
<el-input type="name(数组内的属性)" v-model="nodeName.name(数组内的属性)"></el-input>
-
-
js代码块:
-
-
-
-
-
-
-
-
前端展示(输入内容后显示为空消失):
下面开始总结常见的问题以及功能失效的原因.
1. input左侧出现星号,内容为空却不提醒
原因:已经写好了验证功能,但是没有绑定到input框 .
解决方法:是<el-form-item>标签加入prop="数组内要验证的属性"或者<el-input>标签中加入type="数组内要验证的属性".
2.input框里已经有内容,但还是显示不能为空
(一)原因:input有数据,但是表单没有验证到.
解决方法:给<el-form>绑定整个数组.v-model="newName".
(二)原因:表单验证绑定的不是数组,只是一个单纯的ojbect或者number或者char类型
如此种情况,无论输入什么都会提示为空.
解决方法:将绑定验证内容变成数组【也可以把表单验证写在data里面】
[表单验证只能绑定数组,如果单纯绑定一个数值,会出现验证不到的现象发生]!!!!!!!!!
3.提交表单按钮无法验证以及符合验证的表单内容,也就是提交失败.
此情况一般报错为两个:
Element-ui官方样式表单提交函数功能是这样展示的:
-
-
this.$refs[newName].validate((valid) => {
-
-
-
-
console.log('error submit!!');
-
-
-
-
我们可以看到方法是this.$refs[数组名].validate(() =>{})或者this.$refs.数组名.validate(() =>{})这样一个函数.
如果你用的html5或者是其他不显示参数的集成工具,代码是这样的:
并不知道这个this.$refs有没有真正的请求到,如果你用的显示参数的集成工具(如phpstorm),如果你的代码正确,会这样显示:
我们看到会多显示一个callback,这就说明this.$refs生效了.
所以不管你使用说明软件写的代码,如果出现表单验证提交错误.也就是现实开头那两个错误.你就先输入console.log(this.$ref.newName)[此处的newName是你自己绑定的数组]
看看输出是一个对象还是undefine.显示这个对象说明this.$refs.newName请求成功.
如果显示undefine,可以这样改正:
(一)你的代码格式书写错误,请比照上文有红箭头的图正确案例改正格式.
(二)你的<el-form>未绑定ref,请给<el-form>标签绑定ref="newName"[此处的newName是你自己绑定的数组]
出现表单验证错误先比对案例 ,然后再按照自己的具体代码绑定自己的数据.
[注:Element-ui的表单验证一定是绑定的数组类型]
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发