Validation Rules

Note

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

Form props

How to Use Validation Rules in Forms

Validation Rule Description

Parameter	Description	Type	Default Value
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 will be considered as errors	boolean	false

Note

• When pattern is a string, don't include / symbols before and after, or the regex will be invalid
• type must match the component's value data type, otherwise validation may not work
• Always call the callback function in custom validation, whether it succeeds or fails
• Access component and form information via this.rule and this.api in custom validation

For more advanced usage, see 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 must be at least 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: 'Phone number is required' },
        { 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: 'Email is required' },
        { 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: 'Age is required' },
        { type: 'number', min: 18, max: 65, message: 'Age must be between 18 and 65' }
    ]
}

5. Custom Validation

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

Custom Validation (Access Other Fields)

const rule = [
    {
        type: 'input',
        field: 'password',
        title: 'Password',
        validate: [
            { required: true, min: 6, message: 'Password must be at least 6 characters' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: 'Confirm Password',
        validate: [
            { required: true, message: 'Please confirm your password' },
            {
                validator: (rule, value, callback) => {
                    // Access other field values via this.api
                    const password = this.api.getValue('password');
                    if (value !== password) {
                        callback('Passwords do not match');
                    } else {
                        callback();
                    }
                }
            }
        ]
    }
]

6. Enumeration Value Validation

const rule = {
    type: 'select',
    field: 'role',
    title: 'Role',
    validate: [
        { required: true, message: 'Role is required' },
        { 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 Selection 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: 'Select at least 2 tags' }
    ]
}

Maximum Selection 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: 'Select up to 2 categories' }
    ]
}

8. Date Validation

Date Required Validation

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

9. Combined Validation

const rule = {
    type: 'input',
    field: 'username',
    title: 'Username',
    validate: [
        { required: true, message: 'Username is required' },
        { min: 3, max: 20, message: 'Username must be 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('Discount rate must be greater than 0 when discount is enabled');
                    } else {
                        callback();
                    }
                }
            }
        ]
    }
]