最近在开发中大量使用了 Element UI 的表单 Form 组件。因为项目需要进行很多表单验证，我整理总结了一些使用方法。其实，主要是使用了async-validator插件（git 地址）来实现这些验证。
快速开始
element-ui 要验证表单字段，需将rules属性添加到el-form组件中。rules属性接受一个验证规则对象。以下是一个简单的表单验证示例：
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="Username" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model="form.age" type="number"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: "",
age: "",
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
age: [
{ required: true, message: "请输入年龄", trigger: "blur" },
{ type: "number", min: 18, message: "必须年满18岁", trigger: "blur" },
],
},
};
},
};
</script>
验证规则
required 必填项
required 用于判断是否必填。
rules: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }];
}
验证数字范围
验证数字输入是否在指定范围内，可以使用min、max、len。
rules: {
age: [
{ type: 'number', message: '年龄必须是数字', trigger: 'blur' },
{ min: 18, message: '年龄必须大于等于 18 岁', trigger: 'blur' },
{ max: 60, message: '年龄必须小于等于 60 岁', trigger: 'blur' }
],
roles: [{ type: 'array', message: '角色必须选择 3 个', len: 3 }]
}
电子邮件
email规则检查字段值是否为有效的电子邮件地址，当然也可以用正则表达式来验证。
rules: {
email: [{ type: "email", message: "无效的电子邮件地址", trigger: "blur" }];
}
pattern 正则表达式
pattern 用于判断是否符合正则表达式规则。
rules: {
username: [{ required: true, pattern: /^[a-z]+$/, message: '只能输入小写字母', trigger: 'blur' }],
phone: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }]
}
空格 whitespace
通常，如果必填字段只包含空格，那么我们会将其视为错误。如果想要对仅包含空格的字符串添加额外的测试，可以在规则中添加一个值为 true 的空格属性whitespace。请注意，此规则必须是字符串类型。如果希望清理用户输入而不是测试空格，请参考下面的transform 示例，该示例可以删除空格。
rules: {
username: [
{ required: true, message: "请填写用户名", trigger: "blur" },
{ whitespace: true, message: "用户名不能包含空格" },
];
}
在上面的例子中，我们使用了whitespace属性来指定验证规则中的username字段不能包含空格。
转换 transform
有时在验证之前需要转换一个值，为此，可以在验证规则中添加一个转换函数，属性在验证之前进行转换。
rules: {
name: [
{
required: true,
pattern: /^[a-z]+$/,
transform(value) {
return value.trim();
},
},
];
}
枚举验证 enum
enum 适用于几个特定值
rules: {
role: [{ type: "enum", enum: ["admin", "user"] }];
}
对象及数组的嵌套验证
可以使用fields属性来指定对象及数组的深层次验证规则。
对象类型：
rules: {
addresses: [
{
type: "object",
required: true,
message: "请填写地址",
trigger: "blur",
fields: {
province: { required: true, message: "请填写省份", trigger: "blur" },
city: { required: true, message: "请填写城市", trigger: "blur" },
district: { required: true, message: "请填写区县", trigger: "blur" },
address: { required: true, message: "请填写详细地址", trigger: "blur" },
},
},
];
}
在上面的例子中，指定验证规则中的addresses字段为数组类型，并指定了数组中每个对象的深层次验证规则。
数组类型：
roles: {
type: 'array',
required: true,
len: 3,
fields: {
0: { type: 'string', required: true },
1: { type: 'string', required: true },
2: { type: 'string', required: true }
}
}
自定义验证 validator
validator 函数接受三个参数：验证规则对象，字段的值和回调函数。
例如，验证两个字段是否匹配。为此，我们可以使用validator属性为两个字段定义自定义验证函数。 如果验证失败，我们会使用错误消息调用回调函数。如果验证成功，则不带参数地调用回调函数。
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: this.validateUsername, trigger: 'blur' }
],
},
///////
methods: {
validateUsername(rule, value, callback) {
if (value.length < 3) {
callback(new Error('用户名长度不能小于3位'));
} else {
callback();
}
}
},
验证触发事件 trigger
在 Element-UI 中，表单验证的触发事件（trigger）决定何时执行验证规则。以下是一些常用的触发事件：
- blur：失去焦点触发验证。
- change：值改变触发验证。
- input：输入触发验证。
- submit：当用户点击表单提交按钮时，验证规则将被触发。
这些触发事件可以根据具体的表单需求进行选择和配置，以确保表单数据的有效性和一致性。
触发事件可以使用数组来同时指定多个事件，例如：[‘blur’, ‘change’]，这样在失去焦点或值改变时都会触发验证规则。
rules: { age: [{required:true, trigger:['blur', 'change']}]}
数据类型 type
验证规则 rule 的type 支持的数据类型有：
- string
- number
- boolean
- method
- regexp
- integer
- float
- array
- object
- enum
- date
- url
- hex
可以在验证规则中使用type属性来指定需要验证的数据类型。
rules: {
age: [
{ required: true, message: "请填写年龄", trigger: "blur" },
{ type: "number", message: "年龄必须是数字值" },
];
}
在上面的例子中，使用了type属性来指定验证规则中的age字段必须是数字类型。
错误消息
提供了多种自定义验证失败时显示的错误消息的方式。
message 属性
验证规则对象的message属性指定将显示的错误消息。
rules: {
name: [{ required: true, message: "请输入姓名", trigger: "blur" }];
}
message 消息模板
还可以使用错误消息模板来自定义错误消息。该模板可以包含将替换为字段标签和验证规则参数的占位符。
rules: {
name: [
{ required: true, message: "{label}是必填项", trigger: "blur" },
{ min: 3, message: "{label}至少应该有{min}个字符", trigger: "blur" },
];
}
message 支持 html、vue-i18n
html：
rules: { name: [{ required: true, message: message: '<b>Name is required</b>', trigger: 'blur' }]}
vue-i18n：
rules: {
name: [
{
type: "string",
required: true,
message: () => this.$t("name is required"),
},
];
}
错误消息函数
使用函数动态生成错误消息。该函数接受两个参数：验证规则对象和字段的值。
rules: {
name: [
{
validator: (rule, value) => {
if (value === "admin") {
return new Error("姓名不能是 admin");
} else {
return true;
}
},
trigger: "blur",
},
];
}
在上面的示例中，为name字段定义了一个自定义错误消息函数。
常见实例
异步验证
有时需要进行异步验证，例如通过 API 验证输入的电子邮件地址是否唯一。async-validator 允许使用 Promise 对象进行异步验证。
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="Email" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
email: "",
},
rules: {
email: [
{ required: true, message: "请输入电子邮件地址", trigger: "blur" },
{
validator: (rule, value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value === "admin@example.com") {
reject(new Error("该电子邮件地址已被使用"));
} else {
resolve();
}
}, 1000);
});
},
trigger: "blur",
},
],
},
};
},
};
</script>
在上面的示例中，使用 Promise 对象来进行异步验证，return返回。
复杂的条件验证
有时需要进行复杂的条件验证，例如根据不同输入组合验证。async-validator 允许使用函数进行条件验证。
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="Password" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item label="Confirm Password" prop="confirmPassword">
<el-input v-model="form.confirmPassword" type="password"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
password: "",
confirmPassword: "",
},
rules: {
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("密码至少应该有6个字符"));
} else if (!/\\d/.test(value)) {
callback(new Error("密码应该包含至少一个数字"));
} else {
if (this.form.confirmPassword) {
this.$refs.form.validateField("confirmPassword");
}
callback();
}
},
trigger: "blur",
},
],
confirmPassword: [
{ required: true, message: "请确认密码", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error("密码不匹配"));
} else {
callback();
}
},
trigger: "blur",
},
],
},
};
},
};
</script>
在上面的示例中，使用函数进行条件验证，利用callback返回。
动态验证规则
有时需要根据输入值动态更改验证规则。async-validator 允许使用函数进行动态验证规则。
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="Username" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Age" prop="age">
<el-input v-model="form.age" type="number"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: "",
age: "",
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{
validator: (rule, value) => {
if (value === "admin") {
return {
required: true,
message: "用户名不能为 admin",
trigger: "blur",
};
} else {
return true;
}
},
trigger: "blur",
},
],
age: [
{ required: true, message: "请输入年龄", trigger: "blur" },
{
validator: (rule, value) => {
if (value < 18) {
return {
required: true,
message: "年龄必须大于或等于18岁",
trigger: "blur",
};
} else {
return true;
}
},
trigger: "blur",
},
],
},
};
},
};
</script>
在上面的示例中，使用函数进行动态验证规则。在验证用户名时，如果用户名为 "admin"，则验证将失败并返回错误消息。在验证年龄时，如果年龄小于 18 岁，则验证将失败并返回错误消息。
