表单校验规则(新版)

我们内置了一套新的表单验证机制，通过内置的全新验证引擎可以自动根据组件 value 类型并执行验证逻辑，适配所有 UI 版本，解决了原有方案需要针对不同数据类型和 UI 框架专门适配的问题，显著降低了开发者的配置负担和复杂度。

基本验证规则

规则	验证逻辑	示例
adapter	开启新版验证逻辑,固定为 true	adapter: true
required	必填	required:true → "hello"（通过）
len	值长度必须等于指定数值	len:5 → "hello"（通过）
maxLen	值长度不超过指定数值	maxLen:10 → "abc"（通过）
minLen	值长度不小于指定数值	minLen:3 → "ab"（失败）
pattern	值需匹配正则表达式（支持字符串或RegExp对象）	pattern:^\d+$ → "123"（通过）
uppercase	字符串必须全大写	uppercase:true → "ABC"（通过）
lowercase	字符串必须全小写	lowercase:true → "abc"（通过）
email	需符合邮箱格式	email:true → "a@b.com"（通过）
url	需符合URL格式（排除mailto:）	url:true → "https://example.com"
ip	需符合IPv4地址格式	ip:true → "192.168.1.1"（通过）
phone	需符合手机号格式（支持+86前缀）	phone:true → "13800138000"（通过）
min	数值不小于指定值	min:10 → 15（通过）
max	数值不超过指定值	max:100 → 50（通过）
positive	必须为正数（>0）	positive:true → 1（通过）
negative	必须为负数（<0）	negative:true → -1（通过）
integer	必须为整数	integer:true → 3.0（通过）
number	必须为有效数字（非NaN）	number:true → "123"（通过）
equal	值必须等于指定值（严格匹配===）	equal:"abc" → "abc"（通过）
enum	值必须在指定数组中	enum:[1,2,3] → 2（通过）
hasKeys	对象必须包含指定键名（仅验证键存在性，不校验值）	hasKeys:["id"] → {id:1}（通过）
validator	自定义验证逻辑,必须调用 callback, this.api 可以拿到表单 api	validator:(value, callback) => void;
message	错误信息	message:"填写错误" message:{default:"填写错误", min:"不能小于5位" }

常见校验示例

输入的值必须大于10

const rule = [
    {
        type: 'input',
        field: 'age',
        title: '年龄',
        //value 是 string
        validate: [
            { adapter: true, min: 10, message: '年龄必须大于10' }
        ]
    },{
        type: 'inputNumber',
        field: 'age2',
        title: '年龄',
        //value 是 number
        validate: [
            { adapter: true, min: 10, message: '年龄必须大于10' }
        ]
    }
]

长度必须大于3

const rule = [
    {
        type: 'input',
        field: 'code',
        title: '编码',
        //value 是 stirng
        validate: [
            { adapter: true, min: 3, max: 5, message: '编码必须3-5位' }
        ]
    },{
        type: 'inputNumber',
        field: 'code2',
        title: '编码2',
        //value 是 number
        validate: [
            { adapter: true, min: 3, max: 5, message: {
                min: '编码必须大于等于3位',
                max: '编码必须小于等于5位'
            }}
        ]
    },{
        type: 'group',
        field: 'codes',
        title: '编码3',
        //value 是 array
        props: {
            rule: [{
                type: 'input',
                field: 'code',
                title: '编码',
            }]  
        },
        validate: [
            { adapter: true, min: 3, max: 5, message: '编码必须3-5位' }
        ]
    }
]

自定义验证

const rule = [
    {
        type: 'input',
        field: 'code',
        title: '编码',
        validate: [
            { adapter: true, validator(value, callback){
                  if(value.length >= 3 && value.length <= 5) {
                      callback();
                  } else {
                      callback('编码必须3-5位');
                  }
                }
            }
        ]
    }
]

结合其他字段验证

const rule = [
    {
        type: 'input',
        field: 'code',
        title: '编码',
        validate: [
            { adapter: true, validator(value, callback){
                  if(this.api.getValue('code2') === value) {
                      callback();
                  } else {
                      callback('编码不一致');
                  }
                }
            }
        ]
    },
    {
        type: 'input',
        field: 'code2',
        title: '编码',
    },
]