vue2的el-form表单验证规则rules
时间: 2025-06-29 16:18:20 浏览: 16
### Vue2 中 Element UI `el-form` 组件的表单验证规则 `rules`
在 Vue2 和 Element UI 结合使用的场景下,`el-form` 组件提供了强大的表单验证功能。通过设置 `rules` 属性来定义各个字段的具体校验规则,可以确保用户输入的数据满足特定条件。
#### 定义表单验证规则
为了实现有效的数据验证,在创建表单实例时需指定 `model` 和 `rules` 两个重要属性:
- **model**: 表示整个表单对象的数据源。
- **rules**: 描述各字段应遵循哪些约束条件以及违反后的提示信息。
下面是一个简单的例子展示了如何配置 `rules` 来完成必填项、长度限制等常见类型的检验[^2]。
```html
<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
<!-- 用户名 -->
<el-form-item label="用户名:" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码:" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<!-- 提交按钮 -->
<el-button @click.prevent="submitForm('ruleForm')">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
ruleForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [{ validator: validatePass, trigger: 'blur' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
console.log('错误提交!!');
return false;
}
});
}
}
};
</script>
```
此代码片段中,对于每一个需要被验证的 `<el-form-item>` 元素都指定了对应的 `prop` 值以便关联到相应的验证规则上;而自定义函数 `validatePass()` 被用来处理更复杂的逻辑判断,比如确认两次输入的一致性等问题。
阅读全文
相关推荐

















