Validation Rules

Note

It is recommended to use FormCreate's built-in new validation engine for form validation, 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, 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 validation may not work as expected
• In custom validation, the callback function must be called regardless of success or failure
• In custom validation, you can access component and form information via this.rule and this.api

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