首先展示正确的格式(以验证是否为空为例):
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>
</el-form-item>
</el-form>
js代码块:
data(){
return{
// 表单
nodeName:{
name:''
}
}
},
前端展示(输入内容后显示为空消失):
下面开始总结常见的问题以及功能失效的原因.
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官方样式表单提交函数功能是这样展示的:
newNameBtn(newName) {
this.$refs[newName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
我们可以看到方法是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的表单验证一定是绑定的数组类型]