elementUI-表单-校验
在Element UI中使用表单验证,你需要做以下几步:
- 在
<el-form>
标签上设置ref
属性,这将用于后续引用表单。 - 在
<el-form-item>
标签上使用prop
属性,它对应表单模型中的字段名。 - 使用
rules
属性定义验证规则,这些规则会在表单字段值发生变化时触发。
以下是一个简单的例子,展示了如何使用Element UI表单验证:
<template>
<el-form :model="form" :rules="rules" ref="myForm">
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></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: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.myForm.validate((valid) => {
if (valid) {
alert('验证成功');
// 在这里处理表单提交逻辑
} else {
alert('验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,我们定义了一个带有用户名和密码的表单,并为它们各自设置了必填和长度的验证规则。当用户点击提交按钮时,会触发submitForm
方法,该方法会调用表单的validate
方法来进行验证。如果验证通过,则可以执行表单提交的逻辑;如果验证失败,则会显示相应的错误信息。
评论已关闭