表单校验规则

在 FormCreate 中，可以通过 validate 配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件，都支持表单校验。本文将详细介绍验证规则的使用方法，并提供一些示例来帮助您更好地理解和应用这些功能。

基本验证规则

validate 配置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象，您可以通过设置不同的属性来控制验证行为。

参数	说明	类型	默认值
enum	枚举类型	string	-
len	字段长度	number	-
max	最大长度	number	-
message	校验文案	string	-
min	最小长度	number	-
pattern	正则表达式校验	RegExp	-
required	是否必选	boolean	false
transform	校验前转换字段值	function(value) => transformedValue:any	-
type	内建校验类型，可选项	string	'string'
validator	自定义校验,通过 this.api可以拿到表单 api	function(rule, value, callback)	-
whitespace	必选时，空格是否会被视为错误	boolean	false

注意: type 需要根据组件的 value 数据类型定义

必填验证

名称

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'name',
          title: '名称',
          validate: [{type: 'string', required: true, message: '请输入名称'}]
        }
      ]
    }

  }
}
</script>

最小值验证

数字

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'inputNumber',
          field: 'number',
          title: '数字',
          validate: [{type: 'number', min: 10, required: true, message: '最小为10'}]
        }
      ]
    }

  }
}
</script>

date 组件必填验证

日期

日期区间

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'datePicker',
          field: 'date',
          title: '日期',
          value: '',
          validate: [{type: 'date', required: true, message: '请选择日期'}]
        },
        {
          type: 'datePicker',
          field: 'dateRange',
          title: '日期区间',
          value: [],
          props: {
            range: true
          },
          validate: [{type: 'array', required: true, message: '请选择日期区间'}]
        }
      ]
    }

  }
}
</script>

最小选中项验证

标签

好用快速高效全能

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'checkbox',
          field: 'label',
          title: '标签',
          value: [],
          options: [
            {label: '好用', value: 0},
            {label: '快速', value: 1},
            {label: '高效', value: 2},
            {label: '全能', value: 3},
          ],
          validate: [{type: 'array', min: 3, required: true, message: '最少选择3个'}]
        }
      ]
    }

  }
}
</script>

正则表达式校验

名称

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'name',
          title: '名称',
          validate: [{type: 'pattern', required: true, pattern: '^[0-9]*$', message: '只能输入数字'}]
        }
      ]
    }

  }
}
</script>

自定义验证

名称

复制成功!

<template>
  <form-create v-model:api="fApi" :rule="rule" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'name',
          title: '名称',
          validate: [{
            pattern: '^[0-9]*$',
            validator(rule, value, callback) {
              if ('form-create' === value) {
                callback()
              } else {
                callback('请输入`form-create`')
              }
            },
          }]
        }
      ]
    }

  }
}
</script>

常见校验示例

1.必填字段校验

{
  type: 'input',
  field: 'username',
  title: '用户名',
  validate: [
    { required: true, message: '用户名是必填项' }
  ]
}

2.最小长度校验

{
    type: 'input',
        field: 'password',
        title: '密码',
        validate: [
        { required: true, min: 6, message: '密码长度不能少于6个字符' }
    ]
}

3. 正则表达式校验

{
    type: 'input',
        field: 'phone',
        title: '电话号码',
        validate: [
        { required: true, message: '请输入电话号码' },
        { pattern: '^1[3-9]\d{9}$', message: '请输入有效的手机号' }
    ]
}

4. 自定义校验

{
    type: 'input',
        field: 'age',
        title: '年龄',
        validate: [
        {
            validator: (rule, value, callback) => {
                if (value < 18) {
                    callback(new Error('年龄必须大于或等于18岁'));
                } else {
                    callback();
                }
            },
            message: '请输入合法的年龄'
        }
    ]
}

5. 枚举值校验

{
    type: 'select',
        field: 'role',
        title: '角色',
        validate: [
        { required: true, message: '请选择角色' },
        { enum: ['admin', 'user', 'guest'], message: '角色必须是admin, user, 或guest' }
    ],
        options: [
        { label: '管理员', value: 'admin' },
        { label: '用户', value: 'user' },
        { label: '游客', value: 'guest' }
    ]
}

利用本文中的示例和 async-validator 的文档，您可以快速实现各种校验需求，为用户提供更好的表单交互体验。