element 表单验证规则
时间: 2025-02-03 16:28:51 浏览: 38
### Element UI 表单验证规则
#### 基本概念
Element UI 提供了一套完整的表单验证机制,能够满足大多数场景下的需求。内置了许多常用的验证规则,并支持通过 `validator` 属性来自定义复杂的校验逻辑[^1]。
#### 验证属性配置
在 `<el-form-item>` 组件内可以设置 `rules` 来指定该字段的验证条件。每条规则可以通过对象形式来描述具体的约束条件,比如是否必填 (`required`)、最小长度 (`min`) 和最大长度 (`max`) 等等[^2]。
#### 自定义验证器
当预设的规则无法覆盖特定业务需求时,则可通过编写自定义验证函数来进行更灵活的数据检验。此函数接收三个参数:当前规则(`rule`)、待验证值(`value`) 及回调函数(`callback`) 。一旦发现错误应调用 `callback(new Error('error message'))`; 若无误则需执行 `callback()` 完成验证流程[^3]。
#### 动态表单处理
针对由 JavaScript 动态创建或更新的表单项,在绑定输入框时建议显式指明其数据类型 (如 `type="number"` 并配合 `v-model.number`) ,从而确保数值型数据能被正确解析与验证[^4]。
```html
<template>
<el-form :model="form" :rules="rules">
<!-- ... -->
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" type="number"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入年龄'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 0 || value > 150) {
callback(new Error('合理范围内的年龄'));
} else {
callback();
}
}
}, 1000);
};
return {
form: { age: '' },
rules: {
age: [
{ required: true, message: '年龄不能为空', trigger: 'blur' },
{ validator: checkAge, trigger: 'change' }
]
}
};
}
};
</script>
```
阅读全文
相关推荐


















