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 Parameters

Parameter	Description	Type	Default
type	Value type to validate (default: 'string')	`'string'	'number'
required	Whether the field is required	boolean	false
message	Error message when validation fails	string	-
length	Exact length (for string, array)	number	-
maxLength	Maximum length (for string)	number	-
minLength	Minimum length (for string)	number	-
match	Regular expression pattern (for string)	RegExp	-
uppercase	Must be uppercase (for string)	boolean	false
lowercase	Must be lowercase (for string)	boolean	false
min	Minimum value (for number)	number	-
max	Maximum value (for number)	number	-
equal	Must equal specific value (for number)	number	-
positive	Must be positive (for number)	boolean	false
negative	Must be negative (for number)	boolean	false
true	Must be true (for boolean)	boolean	false
false	Must be false (for boolean)	boolean	false
includes	Array must include given value(s)	any[]	-
deepEqual	Array elements must be equal	any	-
empty	Must be empty (for object)	boolean	false
hasKeys	Object must contain given properties	string[]	-
validator	Custom validation rule	( value: FieldValue | undefined, callback: (error?: string) => void ) => void	-

Note

• Arco Design uses match instead of pattern for regular expression validation
• Arco Design uses minLength and maxLength instead of min and max for string length validation
• 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

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, minLength: 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, maxLength: 200, message: 'Description cannot exceed 200 characters' }
    ]
}

Fixed Length Validation

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

3. Regular Expression Validation

const rule = {
    type: 'input',
    field: 'phone',
    title: 'Phone Number',
    validate: [
        { required: true, message: 'Phone number is required' },
        { match: /^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' }
    ]
}

URL Validation

const rule = {
    type: 'input',
    field: 'website',
    title: 'Website',
    validate: [
        { type: 'url', message: 'Please enter a valid URL' }
    ]
}

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

Positive Number Validation

const rule = {
    type: 'input-number',
    field: 'price',
    title: 'Price',
    validate: [
        { required: true, message: 'Price is required' },
        { type: 'number', positive: true, message: 'Price must be positive' }
    ]
}

5. Custom Validation

const rule = {
    type: 'input',
    field: 'age',
    title: 'Age',
    validate: [
        {
            validator: (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, minLength: 6, message: 'Password length cannot be less than 6 characters' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: 'Confirm Password',
        validate: [
            { required: true, message: 'Please confirm your password' },
            {
                validator: (value, callback) => {
                    // Access other field values through 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: 'Select role' }
    ],
    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', minLength: 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', maxLength: 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' },
        { minLength: 3, maxLength: 20, message: 'Username must be 3-20 characters' },
        { match: /^[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: (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();
                    }
                }
            }
        ]
    }
]