Validation Rules

Note

We recommend using FormCreate's built-in new validation engine for form validation. See Form Validation (New Version)

Form props

How to Use Validation Rules in Forms

Validation Rule Description

Parameter	Description	Type	Default
enum	Enumeration type	string	-
len	Field length	number	-
max	Maximum length	number	-
message	Validation message	string	-
min	Minimum length	number	-
pattern	Regular expression validation	RegExp | string	-
required	Whether required	boolean	false
transform	Transform field value before validation	function(value) => transformedValue:any	-
type	Built-in validation type, Options	string	'string'
validator	Custom validation	function(rule, value, callback)	-
whitespace	When required, whether spaces are considered errors	boolean	false

Note

• When pattern type is string, it cannot contain / symbols before and after, otherwise the regular expression will be invalid
• type must strictly match the component's value data type, otherwise data validation may not work as expected
• In custom validation, the callback function must be executed whether validation succeeds or fails
• In custom validation, you can access component and form-related information through this.rule and this.api

For more advanced usage, please refer to async-validator.

Common Validation Examples

1. Required Field Validation

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    validate: [
        { required: true, message: 'Username is required' }
    ]
}

2. Length Validation

Minimum Length Validation

const rule = {
    type: 'input',
    field: 'password',
    title: 'Password',
    validate: [
        { required: true, min: 6, message: 'Password length cannot be less than 6 characters' }
    ]
}

Maximum Length Validation

const rule = {
    type: 'input',
    field: 'description',
    title: 'Product Description',
    props: {
        type: 'textarea',
        maxLength: 200,
    },
    validate: [
        { required: true, max: 200, message: 'Description cannot exceed 200 characters' }
    ]
}

Fixed Length Validation

const rule = {
    type: 'input',
    field: 'idCard',
    title: 'ID Card Number',
    validate: [
        { required: true, len: 18, message: 'ID card number must be 18 digits' }
    ]
}

3. Regular Expression Validation

const rule = {
    type: 'input',
    field: 'phone',
    title: 'Phone Number',
    validate: [
        { required: true, message: 'Please enter phone number' },
        { pattern: '^1[3-9]\\d{9}$', message: 'Please enter a valid phone number' }
    ]
}

Email Validation

const rule = {
    type: 'input',
    field: 'email',
    title: 'Email',
    validate: [
        { required: true, message: 'Please enter email' },
        { type: 'email', message: 'Please enter a valid email address' }
    ]
}

4. Number Range Validation

const rule = {
    type: 'input-number',
    field: 'age',
    title: 'Age',
    props: {
        min: 0,
        max: 120,
    },
    validate: [
        { required: true, message: 'Please enter age' },
        { type: 'number', min: 18, max: 65, message: 'Age must be between 18-65 years' }
    ]
}

5. Custom Validation

const rule = {
    type: 'input',
    field: 'age',
    title: 'Age',
    validate: [
        {
            validator: (rule, value, callback) => {
                if (value < 18) {
                    callback('Age must be greater than or equal to 18 years');
                } else if (value > 65) {
                    callback('Age cannot exceed 65 years');
                } else {
                    callback();
                }
            }
        }
    ]
}

Custom Validation (Access Other Fields)

const rule = [
    {
        type: 'input',
        field: 'password',
        title: 'Password',
        validate: [
            { required: true, min: 6, message: 'Password length cannot be less than 6 characters' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: 'Confirm Password',
        validate: [
            { required: true, message: 'Please enter password again' },
            {
                validator: (rule, value, callback) => {
                    // Access other field values using this.api
                    const password = this.api.getValue('password');
                    if (value !== password) {
                        callback('The two passwords do not match');
                    } else {
                        callback();
                    }
                }
            }
        ]
    }
]

6. Enumeration Value Validation

const rule = {
    type: 'select',
    field: 'role',
    title: 'Role',
    validate: [
        { required: true, message: 'Please select role' },
        { enum: ['admin', 'user', 'guest'], message: 'Role must be admin, user, or guest' }
    ],
    options: [
        { label: 'Administrator', value: 'admin' },
        { label: 'User', value: 'user' },
        { label: 'Guest', value: 'guest' }
    ]
}

7. Array/Multiple Selection Validation

Minimum Selected Items Validation

const rule = {
    type: 'checkbox',
    field: 'tags',
    title: 'Product Tags',
    value: [],
    options: [
        { value: '1', label: 'Hot Sale' },
        { value: '2', label: 'New Product' },
        { value: '3', label: 'Recommended' },
        { value: '4', label: 'Limited Time' },
    ],
    validate: [
        { required: true, type: 'array', min: 2, message: 'Please select at least 2 tags' }
    ]
}

Maximum Selected Items Validation

const rule = {
    type: 'select',
    field: 'categories',
    title: 'Product Categories',
    value: [],
    props: {
        multiple: true,
    },
    options: [
        { value: '1', label: 'Electronics' },
        { value: '2', label: 'Clothing & Accessories' },
        { value: '3', label: 'Home Goods' },
    ],
    validate: [
        { required: true, type: 'array', max: 2, message: 'Can only select up to 2 categories' }
    ]
}

8. Date Validation

Date Required Validation

const rule = {
    type: 'date-picker',
    field: 'birthday',
    title: 'Birthday',
    validate: [
        { required: true, message: 'Please select birthday' }
    ]
}

Date Range Validation

const rule = {
    type: 'date-picker',
    field: 'dateRange',
    title: 'Activity Date',
    props: {
        mode: 'range',
    },
    validate: [
        { required: true, type: 'array', message: 'Please select activity date range' }
    ]
}

9. Combined Validation

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    validate: [
        { required: true, message: 'Username is required' },
        { min: 3, max: 20, message: 'Username length must be between 3-20 characters' },
        { pattern: '^[a-zA-Z0-9_]+$', message: 'Username can only contain letters, numbers, and underscores' }
    ]
}

10. Conditional Validation

const rule = [
    {
        type: 'switch',
        field: 'enableDiscount',
        title: 'Enable Discount',
        value: false,
    },
    {
        type: 'input-number',
        field: 'discount',
        title: 'Discount Rate',
        props: {
            min: 0,
            max: 1,
            step: 0.01,
            precision: 2,
        },
        validate: [
            {
                validator: (rule, value, callback) => {
                    const enableDiscount = this.api.getValue('enableDiscount');
                    if (enableDiscount && (!value || value <= 0)) {
                        callback('When discount is enabled, the discount rate must be greater than 0');
                    } else {
                        callback();
                    }
                }
            }
        ]
    }
]