在vue中新建一个表单,但其中的el-form-item所绑定的prop并不来自于el-form中 :model所绑定的对象,那么该如何进行表单验证?
时间: 2024-03-27 08:39:00 浏览: 51
如果 el-form-item 所绑定的 prop 并不来自于 el-form 中 :model 所绑定的对象,那么可以通过手动触发验证的方式来进行表单验证。具体实现方式如下:
1. 在 data 中定义一个新的对象,用来存储表单数据。
```
data() {
return {
formData: {
// 表单数据
}
}
}
```
2. 在 el-form 中绑定 :model 为 formData。
```
<el-form :model="formData" ...>
```
3. 在 el-form-item 中绑定 prop 为表单数据中的某个属性。
```
<el-form-item label="xxx" prop="attr">
<el-input v-model="formData.attr"></el-input>
</el-form-item>
```
4. 在 methods 中定义一个方法,用来手动触发表单验证。
```
methods: {
validateForm() {
return new Promise((resolve, reject) => {
this.$refs.form.validate(valid => {
if (valid) {
resolve();
} else {
reject();
}
});
});
}
}
```
5. 在需要触发表单验证的位置(比如提交表单)调用 validateForm 方法。
```
async submitForm() {
try {
await this.validateForm();
// 验证通过,提交表单
} catch (err) {
// 验证失败,提示错误信息
}
}
```
通过以上方式,可以实现对 el-form-item 所绑定的属性进行表单验证的功能。
阅读全文