Validation Rules

Note

We recommend using FormCreate's new validation engine. See Form Validation (New Version)

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 / at the start or end, or the regex will be invalid
• type must match the component's value data type, or validation may fail
• In custom validation, always call the callback function, whether validation passes or fails
• Access component and form data via this.rule and this.api in custom validation

For 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', trigger: 'blur' }
    ]
}

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', trigger: 'blur' }
    ]
}

Maximum Length Validation

const rule = {
    type: 'input',
    field: 'description',
    title: 'Product Description',
    props: {
        type: 'textarea',
        maxlength: 200,
    },
    validate: [
        { required: true, max: 200, message: 'Description must not exceed 200 characters', trigger: 'blur' }
    ]
}

Fixed Length Validation

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

3. Regular Expression Validation

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

Email Validation

const rule = {
    type: 'input',
    field: 'email',
    title: 'Email',
    validate: [
        { required: true, message: 'Enter email', trigger: 'blur' },
        { pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$', message: 'Enter a valid email address', trigger: 'blur' }
    ]
}

Website URL Validation

const rule = {
    type: 'input',
    field: 'website',
    title: 'Website',
    validate: [
        { pattern: '^https?://.+', message: 'Enter a valid website (starting with http:// or https://)', trigger: 'blur' }
    ]
}

4. Number Range Validation

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

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');
                } else if (value > 65) {
                    callback('Age must not exceed 65');
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }
    ]
}

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', trigger: 'blur' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: 'Confirm Password',
        validate: [
            { required: true, message: 'Enter password again', trigger: 'blur' },
            {
                validator: (rule, value, callback) => {
                    // Access other field values through this.api
                    const password = this.api.getValue('password');
                    if (value !== password) {
                        callback('The two passwords entered do not match');
                    } else {
                        callback();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]

6. Enumeration Value Validation

const rule = {
    type: 'select',
    field: 'role',
    title: 'Role',
    validate: [
        { required: true, message: 'Select role', trigger: 'change' },
        { enum: ['admin', 'user', 'guest'], message: 'Role must be admin, user, or guest', trigger: 'change' }
    ],
    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', trigger: 'change' }
    ]
}

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: 'Can only select up to 2 categories', trigger: 'change' }
    ]
}

8. Date Validation

Date Required Validation

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

Date Range Validation

const rule = {
    type: 'date-picker',
    field: 'dateRange',
    title: 'Activity Date',
    props: {
        type: 'daterange',
    },
    validate: [
        { required: true, type: 'array', message: 'Select activity date range', trigger: 'change' }
    ]
}

9. Combined Validation

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

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();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]