FormCreate

Appearance

校验规则 ​

注意

推荐使用 FormCreate 内置的全新验证引擎进行表单验证，表单校验(新版)

Form props

在表单中如何使用验证规则

验证规则说明 ​

键名说明类型
required是否为必选字段，当值为空值时（空字符串、空数组、false、undefined、null ），校验不通过boolean
message错误提示文案，可以设置为一个函数来返回动态的文案内容string | (value, rule) => string
validator通过函数进行校验，可以返回一个 Promise 来进行异步校验(value, rule) => boolean | string | Promise
pattern通过正则表达式进行校验，正则无法匹配表示校验不通过RegExp
trigger设置本项规则的触发时机，优先级高于 Form 组件设置的 validate-trigger 属性，可选值为 onChange、onBlur、onSubmitstring | string[]
formatter格式化函数，将表单项的值转换后进行校验(value, rule) => any
validateEmpty设置 validator 和 pattern 是否要对空值进行校验，默认值为 true，可以设置为 false 来禁用该行为boolean

注意

  • Vant 的 validator 返回 boolean、string 或 Promise，不需要 callback
  • Vant 的 message 可以是函数，用于返回动态的错误提示文案
  • Vant 的 trigger 可选值为 onChange、onBlur、onSubmit
  • 自定义验证中可通过 this.rule 和 this.api 获取组件和表单的相关信息

常见校验示例 ​

1. 必填字段校验 ​

js
const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    validate: [
        { required: true, message: '用户名是必填项', trigger: 'onBlur' }
    ]
}

2. 长度校验 ​

最小长度校验 ​

js
const rule = {
    type: 'input',
    field: 'password',
    title: '密码',
    validate: [
        { 
            required: true, 
            validator: (value) => {
                if (!value || value.length < 6) {
                    return '密码长度不能少于6个字符';
                }
                return true;
            },
            trigger: 'onBlur' 
        }
    ]
}

最大长度校验 ​

js
const rule = {
    type: 'input',
    field: 'description',
    title: '商品描述',
    props: {
        type: 'textarea',
        maxlength: 200,
    },
    validate: [
        { 
            validator: (value) => {
                if (value && value.length > 200) {
                    return '描述长度不能超过200个字符';
                }
                return true;
            },
            trigger: 'onBlur' 
        }
    ]
}

3. 正则表达式校验 ​

js
const rule = {
    type: 'input',
    field: 'phone',
    title: '手机号',
    validate: [
        { required: true, message: '请输入手机号', trigger: 'onBlur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'onBlur' }
    ]
}

邮箱校验 ​

js
const rule = {
    type: 'input',
    field: 'email',
    title: '邮箱',
    validate: [
        { required: true, message: '请输入邮箱', trigger: 'onBlur' },
        { 
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, 
            message: '请输入有效的邮箱地址', 
            trigger: 'onBlur' 
        }
    ]
}

4. 数字范围校验 ​

js
const rule = {
    type: 'stepper',
    field: 'age',
    title: '年龄',
    props: {
        min: 0,
        max: 120,
    },
    validate: [
        { required: true, message: '请输入年龄', trigger: 'onChange' },
        { 
            validator: (value) => {
                if (value < 18 || value > 65) {
                    return '年龄必须在18-65岁之间';
                }
                return true;
            },
            trigger: 'onChange' 
        }
    ]
}

5. 自定义校验 ​

js
const rule = {
    type: 'input',
    field: 'age',
    title: '年龄',
    validate: [
        {
            validator: (value) => {
                if (value < 18) {
                    return '年龄必须大于或等于18岁';
                } else if (value > 65) {
                    return '年龄不能超过65岁';
                }
                return true;
            },
            trigger: 'onBlur'
        }
    ]
}

自定义校验（访问其他字段） ​

js
const rule = [
    {
        type: 'input',
        field: 'password',
        title: '密码',
        validate: [
            { 
                required: true, 
                validator: (value) => {
                    if (!value || value.length < 6) {
                        return '密码长度不能少于6个字符';
                    }
                    return true;
                },
                trigger: 'onBlur' 
            }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: '确认密码',
        validate: [
            { required: true, message: '请再次输入密码', trigger: 'onBlur' },
            {
                validator: (value) => {
                    // 通过 this.api 访问其他字段的值
                    const password = this.api.getValue('password');
                    if (value !== password) {
                        return '两次输入的密码不一致';
                    }
                    return true;
                },
                trigger: 'onBlur'
            }
        ]
    }
]

6. 异步校验 ​

js
const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    validate: [
        { required: true, message: '用户名是必填项', trigger: 'onBlur' },
        {
            validator: (value) => {
                // 返回 Promise 进行异步校验
                return new Promise((resolve) => {
                    checkUsernameExists(value).then(exists => {
                        if (exists) {
                            resolve('用户名已存在');
                        } else {
                            resolve(true);
                        }
                    });
                });
            },
            trigger: 'onBlur'
        }
    ]
}

7. 数组/多选校验 ​

最小选中项校验 ​

js
const rule = {
    type: 'checkbox',
    field: 'tags',
    title: '商品标签',
    value: [],
    options: [
        { value: '1', label: '热销' },
        { value: '2', label: '新品' },
        { value: '3', label: '推荐' },
        { value: '4', label: '限时' },
    ],
    validate: [
        { 
            required: true, 
            validator: (value) => {
                if (!value || value.length < 2) {
                    return '请至少选择2个标签';
                }
                return true;
            },
            trigger: 'onChange' 
        }
    ]
}

最大选中项校验 ​

js
const rule = {
    type: 'checkbox',
    field: 'categories',
    title: '商品分类',
    value: [],
    options: [
        { value: '1', label: '电子产品' },
        { value: '2', label: '服装配饰' },
        { value: '3', label: '家居用品' },
    ],
    validate: [
        { 
            validator: (value) => {
                if (value && value.length > 2) {
                    return '最多只能选择2个分类';
                }
                return true;
            },
            trigger: 'onChange' 
        }
    ]
}

8. 动态错误提示 ​

js
const rule = {
    type: 'input',
    field: 'password',
    title: '密码',
    validate: [
        { 
            required: true, 
            message: (value, rule) => {
                if (!value) {
                    return '密码是必填项';
                }
                if (value.length < 6) {
                    return `密码长度不能少于6个字符，当前${value.length}个字符`;
                }
                return '';
            },
            trigger: 'onBlur' 
        }
    ]
}

9. 组合校验 ​

js
const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    validate: [
        { required: true, message: '用户名是必填项', trigger: 'onBlur' },
        { 
            validator: (value) => {
                if (value.length < 3 || value.length > 20) {
                    return '用户名长度必须在3-20个字符之间';
                }
                if (!/^[a-zA-Z0-9_]+$/.test(value)) {
                    return '用户名只能包含字母、数字和下划线';
                }
                return true;
            },
            trigger: 'onBlur' 
        }
    ]
}

10. 条件校验 ​

js
const rule = [
    {
        type: 'switch',
        field: 'enableDiscount',
        title: '启用折扣',
        value: false,
    },
    {
        type: 'stepper',
        field: 'discount',
        title: '折扣率',
        props: {
            min: 0,
            max: 1,
            step: 0.1,
            decimalLength: 2,
        },
        validate: [
            {
                validator: (value) => {
                    const enableDiscount = this.api.getValue('enableDiscount');
                    if (enableDiscount && (!value || value <= 0)) {
                        return '启用折扣时，折扣率必须大于0';
                    }
                    return true;
                },
                trigger: 'onChange'
            }
        ]
    }
]

11. 格式化后校验 ​

js
const rule = {
    type: 'input',
    field: 'phone',
    title: '手机号',
    validate: [
        { 
            required: true, 
            formatter: (value) => {
                // 移除所有非数字字符
                return value.replace(/\D/g, '');
            },
            validator: (value) => {
                if (value.length !== 11) {
                    return '请输入11位手机号';
                }
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    return '请输入有效的手机号';
                }
                return true;
            },
            trigger: 'onBlur' 
        }
    ]
}

FormCreate 是一个开源项目，基于 MIT 许可证发布，欢迎个人和企业用户免费使用

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1