Vue ElementUI之Form表单验证遇到的问题
Vue ElementUI是一个基于Vue.js的组件库，提供了许多实用的UI组件，其中Form表单验证是一个常见的问题。本文将主要介绍Vue ElementUI之Form表单验证遇到的问题，并提供解决方案。
标题: Vue ElementUI之Form表单验证遇到的问题
描述: 主要介绍了Vue ElementUI之Form表单验证遇到的问题，需要的朋友可以参考下
标签: vue elementui 表单验证 vue表单验证
问题一：传递数组参数
在使用Vue ElementUI的Form表单验证时，我们可能需要传递一个数组参数给后台服务器，而不是对象。这时，我们就需要特殊处理。我们可以使用ref来绑定表单对象，然后使用forEach方法来遍历数组，validate每个对象的输入项。
例如：
```
let flag = true;
if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) {
this.$refs[formName].forEach((obj, index) => {
obj.validate((valid) => {
if (valid) {
console.log('验证成功！');
} else {
console.log('error submit!!');
flag = false;
return false;
}
});
});
if (flag) {
this.secondDialog = false;
this.thirdDialog = true;
}
}
```
问题二：多个弹出框的验证
在使用Vue ElementUI的Form表单验证时，我们可能需要在多个弹出框中进行验证。这时，我们需要注意每个弹出框的ref不能相同，以免出现验证错误。
例如：
```
<el-form :model="numberValidateForm" ref="numberValidateForm">
<!-- 输入框 -->
</el-form>
<el-button @click="xxxxxx('number')">保存</el-button>
<el-form :model="number2ValidateForm" ref="number2ValidateForm">
<!-- 输入框 -->
</el-form>
<el-button @click="xxxxxx('number2')">保存</el-button>
```
问题三：使用JQ进行验证
如果我们觉得使用Vue ElementUI的Form表单验证太麻烦，也可以使用JQ的方法来进行验证。例如：
```
let flag = true;
this.requestParamsList.map((data, index) => {
if (data.paramName == "") {
$(".jqueryValidate").eq(index).show();
flag = false;
}
});
```
总结
本文主要介绍了Vue ElementUI之Form表单验证遇到的问题，并提供了解决方案。我们可以使用ref来绑定表单对象，然后使用forEach方法来遍历数组，validate每个对象的输入项；也可以使用JQ的方法来进行验证。希望这篇文章能够对大家有所帮助。
