Validation Rules

Note

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

FormRule props

How to Use Validation Rules in Forms

Validation Rule Description

Name	Type	Default	Description	Required
boolean	Boolean	-	Built-in validation method, validates whether the value type is boolean, example: { boolean: true, message: 'Data type must be boolean' }	N
date	Boolean / Object	-	Built-in validation method, validates whether the value is a date format, Parameter Documentation, example: { date: { delimiters: '-' }, message: 'Date delimiter must be a hyphen (-)' }. TS type: boolean | IsDateOptions interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }.Detailed type definition	N
email	Boolean / Object	-	Built-in validation method, validates whether the value is an email format, Parameter Documentation, example: { email: { ignore_max_length: true }, message: 'Enter a valid email address' }. TS type: boolean | IsEmailOptions import { IsEmailOptions } from 'validator/es/lib/isEmail'.Detailed type definition	N
enum	Array	-	Built-in validation method, validates whether the value belongs to the values in the enumeration. Example: { enum: ['primary', 'info', 'warning'], message: 'Value can only be one of primary/info/warning' }. TS type: Array<string>	N
idcard	Boolean	-	Built-in validation method, validates whether the value is an ID card number, component validation regex is /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/i, example: { idcard: true, message: 'Enter a valid ID card number' }	N
len	Number / Boolean	-	Built-in validation method, validates fixed length of value, e.g., len: 10 means the character length of the value can only equal 10, Chinese represents 2 characters, English is 1 character. Example: { len: 10, message: 'Content length is incorrect' }. If you want letters and Chinese to have the same length, example: { validator: (val) => val.length === 10, message: 'Content text length can only be 10 characters' }	N
max	Number / Boolean	-	Built-in validation method, validates maximum length of value, e.g., max: 100 means the value cannot exceed 100 characters, Chinese represents 2 characters, English is 1 character. Example: { max: 10, message: 'Content exceeds limit' }. If you want letters and Chinese to have the same length, example: { validator: (val) => val.length <= 10, message: 'Content text length cannot exceed 10 characters' } If the data type is a number (Number), it automatically becomes a number size comparison	N
message	String	-	Error message displayed when validation fails, if empty, it will not be displayed	N
min	Number / Boolean	-	Built-in validation method, validates minimum length of value, e.g., min: 10 means the value cannot be less than 10 characters, Chinese represents 2 characters, English is 1 character. Example: { min: 10, message: 'Content length is insufficient' }. If you want letters and Chinese to have the same length, example: { validator: (val) => val.length >= 10, message: 'Content text length must be at least 10 characters' }. If the data type is a number (Number), it automatically becomes a number size comparison	N
number	Boolean	-	Built-in validation method, validates whether the value is a number (1.2, 1e5 are all considered numbers), example: { number: true, message: 'Enter a number' }	N
pattern	Object	-	Built-in validation method, validates whether the value matches the regular expression, example: { pattern: /@qq.com/, message: 'Enter a QQ email' }. TS type: RegExp	N
required	Boolean	-	Built-in validation method, validates whether the value has been filled. When this value is true, the required mark is displayed by default, and can be hidden by setting requiredMark: false	N
whitespace	Boolean	-	Built-in validation method, validates whether the value is whitespace. Example: { whitespace: true, message: 'Value cannot be empty' }	N
telnumber	Boolean	-	Built-in validation method, validates whether the value is a phone number, validation regex is /^1[3-9]\d{9}$/, example: { telnumber: true, message: 'Enter a valid phone number' }	N
trigger	String	change	Validation trigger method. Options: change/blur	N
type	String	error	Error message type displayed when validation fails, there are two types: warning message and error message. Options: error/warning	N
url	Boolean / Object	-	Built-in validation method, validates whether the value is a network link address, Parameter Documentation, example: { url: { protocols: ['http','https','ftp'] }, message: 'Enter a valid URL address' }. TS type: boolean | IsURLOptions `import { IsURLOptions } from 'validator/es/lib/isURL'``.Detailed type definition	N
validator	Function	-	Custom validation rule, example: { validator: (val) => val.length > 0, message: 'Enter content'}. TS type: CustomValidator type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType> type CustomValidateResolveType = boolean | CustomValidateObj interface CustomValidateObj { result: boolean; message: string; type?: 'error' | 'warning' | 'success' } type ValueType = any.Detailed type definition	N

Note

• TDesign's validator returns boolean or CustomValidateObj (no callback needed)
• TDesign supports built-in telnumber and idcard validation methods
• Use trigger and type properties to control validation timing and error type
• Access component and form data 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', 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 length cannot 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 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' },
        { telnumber: true, 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' },
        { email: true, message: 'Enter a valid email address', trigger: 'blur' }
    ]
}

ID Card Number Validation

const rule = {
    type: 'input',
    field: 'idCard',
    title: 'ID Card Number',
    validate: [
        { required: true, message: 'Enter ID card number', trigger: 'blur' },
        { idcard: true, message: 'Enter a valid ID card number', trigger: 'blur' }
    ]
}

URL Validation

const rule = {
    type: 'input',
    field: 'website',
    title: 'Website',
    validate: [
        { url: true, message: 'Enter a valid website', 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' },
        { number: true, min: 18, max: 65, message: 'Age must be between 18-65 years', trigger: 'blur' }
    ]
}

5. Custom Validation

const rule = {
    type: 'input',
    field: 'age',
    title: 'Age',
    validate: [
        {
            validator: (val) => {
                if (val < 18) {
                    return { result: false, message: 'Age must be greater than or equal to 18 years' };
                } else if (val > 65) {
                    return { result: false, message: 'Age cannot exceed 65 years' };
                }
                return true;
            },
            trigger: 'blur'
        }
    ]
}

Custom Validation (Accessing Other Fields)

const rule = [
    {
        type: 'input',
        field: 'password',
        title: 'Password',
        validate: [
            { required: true, min: 6, message: 'Password length cannot be less than 6 characters', trigger: 'blur' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: 'Confirm Password',
        validate: [
            { required: true, message: 'Enter password again', trigger: 'blur' },
            {
                validator: (val) => {
                    // Access other field values through this.api
                    const password = this.api.getValue('password');
                    if (val !== password) {
                        return { result: false, message: 'The two passwords entered do not match' };
                    }
                    return true;
                },
                trigger: 'blur'
            }
        ]
    }
]

6. Enumeration Value Validation

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

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 length 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: (val) => {
                    const enableDiscount = this.api.getValue('enableDiscount');
                    if (enableDiscount && (!val || val <= 0)) {
                        return { result: false, message: 'When discount is enabled, discount rate must be greater than 0' };
                    }
                    return true;
                },
                trigger: 'blur'
            }
        ]
    }
]

11. Warning Type Validation

const rule = {
    type: 'input',
    field: 'description',
    title: 'Product Description',
    validate: [
        { 
            max: 200, 
            message: 'Description length is recommended not to exceed 200 characters', 
            type: 'warning',
            trigger: 'blur' 
        }
    ]
}