elementUI中的form-item表单使用了v-show进行隐藏,那么提交表单进行表单验证的时候,还会验证这个表单吗
在Element UI中,使用v-show
来隐藏的el-form-item
不会影响表单验证。表单验证是通过el-form
的rules
属性来实现的,而el-form-item
的v-show
并不影响这个属性。
如果你的el-form-item
是动态显示或隐藏的,那么在显示该项之前,你需要确保表单模型包含了该项的数据。如果使用了v-model
绑定,那么在显示项之前设置对应数据即可。
以下是一个简单的例子:
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="用户名" prop="username" v-show="isUsernameVisible">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-button @click="validateForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
]
},
isUsernameVisible: true
};
},
methods: {
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('验证成功');
} else {
console.log('验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,el-form-item
用户名是动态显示的,但它有一个必填的验证规则。表单验证是通过点击提交按钮触发的。即使用户名项是动态显示的,它也会参与验证流程。如果用户名项是隐藏的,则用户名的验证规则会被跳过,只有密码的验证规则会被应用。
评论已关闭