Element Plus 获取表单验证通过的值
时间: 2024-02-15 17:03:19 浏览: 221
element-plus-2.2.36.zip
在 Element Plus 中,可以使用 `ref` 获取表单组件的实例,然后通过调用 `validate()` 方法来验证表单是否通过,再通过调用 `model` 属性来获取表单数据。
以下是一个示例代码:
```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log(this.form); // 获取表单数据
} else {
console.log('表单验证失败');
return false;
}
});
}
}
}
</script>
```
在上述代码中,`submitForm` 方法中通过 `this.$refs.form.validate()` 方法来验证表单是否通过,如果通过则可以通过 `this.form` 来获取表单数据。
阅读全文