Form Validation (New)

We've built in a new form validation mechanism. Through the built-in validation engine, it automatically executes validation logic based on component value types and adapts to all UI versions, solving the problem of the original solution requiring specialized adaptation for different data types and UI frameworks, significantly reducing developers' configuration burden and complexity.

Validation Rules

Rule	Validation Logic	Example
adapter	Enable new validation logic, fixed as true	adapter: true
required	Required	required:true → "hello" (pass)
len	Value length must equal specified number	len:5 → "hello" (pass)
maxLen	Value length does not exceed specified number	maxLen:10 → "abc" (pass)
minLen	Value length not less than specified number	minLen:3 → "ab" (fail)
pattern	Value must match regular expression (supports string or RegExp object)	pattern:^\d+$ → "123" (pass)
uppercase	String must be all uppercase	uppercase:true → "ABC" (pass)
lowercase	String must be all lowercase	lowercase:true → "abc" (pass)
email	Must conform to email format	email:true → "a@b.com" (pass)
url	Must conform to URL format (excluding mailto:)	url:true → "https://example.com"
ip	Must conform to IPv4 address format	ip:true → "192.168.1.1" (pass)
phone	Must conform to phone number format (supports +86 prefix)	phone:true → "13800138000" (pass)
min	Numeric value not less than specified value	min:10 → 15 (pass)
max	Numeric value does not exceed specified value	max:100 → 50 (pass)
positive	Must be positive number (>0)	positive:true → 1 (pass)
negative	Must be negative number (<0)	negative:true → -1 (pass)
integer	Must be integer	integer:true → 3.0 (pass)
number	Must be valid number (not NaN)	number:true → "123" (pass)
equal	Value must equal specified value (strict match ===)	equal:"abc" → "abc" (pass)
enum	Value must be in specified array	enum:[1,2,3] → 2 (pass)
hasKeys	Object must contain specified key names (only validates key existence, not values)	hasKeys:["id"] → {id:1} (pass)
validator	Custom validation logic, must call callback, this.api can get form api	validator:(value, callback) => void;
message	Error message	message:"Fill in error" message:{default:"Fill in error", min:"Cannot be less than 5 digits" }

Note

In custom validation, you can obtain component and form information through this.rule and this.api, making it convenient to access values of other components during validation.

When pattern type is string, it cannot contain / symbols before and after, otherwise the regular expression will be invalid.

In custom validation, whether successful or failed, the callback function must be executed.

Common Validation Examples

Input Value Must Be Greater Than 10

const rule = [
    {
        type: 'input',
        field: 'age',
        title: 'Age',
        //value is string
        validate: [
            { adapter: true, min: 10, message: 'Age must be greater than 10' }
        ]
    },{
        type: 'inputNumber',
        field: 'age2',
        title: 'Age',
        //value is number
        validate: [
            { adapter: true, min: 10, message: 'Age must be greater than 10' }
        ]
    }
]

Length Must Be Greater Than 3

const rule = [
    {
        type: 'input',
        field: 'code',
        title: 'Code',
        //value is string
        validate: [
            { adapter: true, min: 3, max: 5, message: 'Code must be 3-5 digits' }
        ]
    },{
        type: 'inputNumber',
        field: 'code2',
        title: 'Code2',
        //value is number
        validate: [
            { adapter: true, min: 3, max: 5, message: {
                min: 'Code must be greater than or equal to 3 digits',
                max: 'Code must be less than or equal to 5 digits'
            }}
        ]
    },{
        type: 'group',
        field: 'codes',
        title: 'Code3',
        //value is array
        props: {
            rule: [{
                type: 'input',
                field: 'code',
                title: 'Code',
            }]  
        },
        validate: [
            { adapter: true, min: 3, max: 5, message: 'Code must be 3-5 digits' }
        ]
    }
]

Custom Validation

const rule = [
    {
        type: 'input',
        field: 'code',
        title: 'Code',
        validate: [
            { adapter: true, validator(value, callback){
                  if(value.length >= 3 && value.length <= 5) {
                      callback();
                  } else {
                      callback('Code must be 3-5 digits');
                  }
                }
            }
        ]
    }
]

Validation Combined with Other Fields

const rule = [
    {
        type: 'input',
        field: 'code',
        title: 'Code',
        validate: [
            { adapter: true, validator(value, callback){
                  if(this.api.getValue('code2') === value) {
                      callback();
                  } else {
                      callback('Codes do not match');
                  }
                }
            }
        ]
    },
    {
        type: 'input',
        field: 'code2',
        title: 'Code',
    },
]