ElementUI 流程-elementui form rules

解决方案简述

在使用ElementUI的form表单时，设置rules验证规则是确保用户输入数据有效性的重要手段。通过定义合理的rules，可以在用户提交表单前自动检测输入内容是否符合要求，从而提升用户体验并保证数据质量。

1. 基本用法

引入ElementUI中的Form组件和FormItem组件，在vue文件中，data函数里定义一个包含rules属性的对象，这个对象用于存储各个表单项的验证规则。
```html

export default {
data() {
return {
ruleForm: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
]
}
};
}
};

```
上述代码实现了对“活动名称”这个表单项非空验证，当用户没有输入内容且失去焦点（blur事件）时会提示错误信息。

2. 多种验证规则组合

可以为一个表单项添加多个验证规则，例如同时进行必填、长度限制等验证。
javascript
rules: {
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}


3. 自定义验证规则

如果内置的验证规则不能满足需求，还可以自定义验证逻辑。通过validator属性传入一个回调函数，在其中编写验证逻辑。
javascript
rules: {
age: [
{ validator: checkAge, trigger: 'blur' }
]
},
methods: {
checkAge(rule, value, callback) {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
}
}

这里以验证年龄为例，当年龄为空时提示不能为空；不为整数时提示输入数字值；小于18岁时提示必须年满18岁。

通过以上几种方式，我们可以根据实际项目需求灵活地为ElementUI的form表单设置合适的rules验证规则。