参数

type :标志要使用的validator的数据类型
required :必填
message :提示内容
trigger :触发条件 (change||blur)
min :最小值
max :最大值
len :精准长度 (优先级高于min,max)
enum :枚举中存在该值 (type必须为enum类型)
whitespace :不能包含空白符
pattern :正则 (必须加 required: true)

类型

string : 必须是 类型-stringThis is the default type
number : 必须是 类型-number
boolean : 必须是 类型-boolean
method : 必须是 类型-function
regexp : 必须是 在创建新 时不生成异常的 实例或字符串-RegExpRegExp
integer : 必须是类型和整数-number
float : 必须是类型和浮点编号-number
array : 必须是 由 确定的数组-Array.isArray
object :必须是类型而不是 -objectArray.isArray
enum : 值必须存在于 中-enum
date : 值必须有效,由Date
url : 必须是 类型-url
hex : 必须是 类型-hex
email : 必须是 类型-email
any : 可以是任何类型

示例

required:

必填字段,即非空验证。如上面实例中的的非空验证,以及邮箱前边的必填符号*,就是这个参数的功劳。

pattern:

正则表达式,如果需要验证手机号码之类,可以直接编写正则表达式配置到校验规则中,那么就不需要自己去校验了,由校验器自动校验。

  1. pattern: [{ type: "string", required: true, pattern: /^[a-z]+$/ }]

min/max:

判断数据大小范围,通常对数字大小范围做校验。对于字符串和数组类型,将根据长度进行比较。

  1. minmax: [
  2. { required: true, message: "请输入活动名称", trigger: "blur" },
  3. { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  4. ]

len:

长度验证,如11位手机号码。

  1. len: [{ type: "array", required: true, len: 3 }],

enum:

枚举值验证,示例代码如下:

  1. enum: [{ type: "enum", enum: ['admin', 'user', 'guest'] }]

whitespace:

验证是否只有空格(如果没有该配置,则全空格的输入值也是有效的)。

  1. whitespace: [{
  2. type: "string",
  3. message: '只存在空格',
  4. whitespace: true,
  5. trigger: ['change', 'blur']
  6. }]

transform:

有时有必要在验证之前转换值,以强制或以某种方式对其进行清理。为此 transform ,向验证规则添加一个功能。在验证之前,先转换属性,然后将其重新分配给源对象,以更改该属性的值。
只有输入1、2、3的时候才能校验通过。
貌似这个只能辅助校验,并不能改变组件绑定变量本身的值。

  1. transform: [{
  2. type: 'enum',
  3. enum: [2, 4, 6],
  4. message: `结果不存在`,
  5. trigger: ['change', 'blur'],
  6. transform (value) {
  7. return Number(value * 2)
  8. }
  9. }]

fields:

深层规则,可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则,如地址对象的省市区的规则验证:

  1. fields: [
  2. { // object类型
  3. type: "object",
  4. required: true,
  5. fields: {
  6. street: { type: "string", required: true },
  7. city: { type: "string", required: true },
  8. zip: { type: "string", required: true, len: 8, message: "invalid zip" }
  9. }
  10. },
  11. { // array类型
  12. type: "array", required: true, len: 3,
  13. fields: {
  14. 0: { type: "string", required: true },
  15. 1: { type: "string", required: true },
  16. 2: { type: "string", required: true }
  17. }
  18. }
  19. ]

messages:

未通过校验的提示信息:

  1. message: [
  2. { type: "string", required: true, message: "Name is required" },
  3. // 支持html:
  4. { type: "string", required: true, message: "<b>Name is required</b>" },
  5. // 支持vue-i18n:
  6. { type: "string", required: true, message: () => this.$t('name is required') }
  7. ]

validator:

可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点,但是能实现比较复杂的业务逻辑判断。
简单的用法:

  1. validator: [{
  2. validator (rule, value, callback) {
  3. return value === 'test';
  4. },
  5. message: 'Value is not equal to "test".',
  6. }]

复杂用法:

  1. ······
  2. data () {
  3. const checkAge = (rule, value, callback) => {
  4. if (!value) {
  5. return callback(new Error('年龄不能为空'));
  6. }
  7. setTimeout(() => {
  8. if (!Number.isInteger(value)) {
  9. callback(new Error('请输入数字值'));
  10. } else {
  11. if (value < 18) {
  12. callback(new Error('必须年满18岁'));
  13. } else {
  14. callback();
  15. }
  16. }
  17. }, 1000);
  18. };
  19. return {
  20. ruleForm: {
  21. age: 11
  22. },
  23. rules: {
  24. age: [{
  25. type: 'number',
  26. required: true,
  27. validator: checkAge,
  28. trigger: ['blur', 'change']
  29. }]
  30. }
  31. };
  32. }
  33. ······