在Vue2和ElementUI中，你可以使用表单的ref属性和this.$refs来访问表单，并使用ElementUI的表单验证规则来验证表单。以下是一个简单的例子：
- 定义表单并设置
ref属性。 - 定义验证规则。
- 使用
this.$refs.formName.validate方法触发验证。
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-button @click="validateForm">提交</el-button>
</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: '年龄必须是数字值', trigger: 'blur' }
]
}
};
},
methods: {
validateForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 验证成功，可以提交表单或进行其他操作
console.log('验证通过', this.form);
} else {
// 验证失败
console.log('验证失败');
return false;
}
});
}
}
};
</script>在这个例子中，当用户点击提交按钮时，会触发validateForm方法，该方法使用this.$refs.form.validate来执行表单验证。如果验证通过，可以进行后续的操作；如果验证失败，则不会进行后续操作。