Form Validation

In FormCreate, you can set validation rules for form components through the validate configuration item. Both built-in form components and custom form components support form validation. This guide details the usage of validation rules and provides examples to help you better understand and apply these features.

Basic Validation Rules

The validate configuration item lets you define multiple validation rules for each form field. Each rule is an object, and you can control validation behavior by setting different properties.

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 (when string type, no need for / before and after)	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, can get form api through this.api	function(rule, value, callback)	-
whitespace	When required, whether spaces are considered errors	boolean	false

Note

type must strictly match the component's value data type, otherwise data validation cannot be completed as expected. The new form validation no longer requires manual configuration of type. For usage methods, see Form Validation (New Version).

Form validation implementation methods and parameters may differ across UI frameworks. Please refer to the form validation section in the corresponding framework documentation.

In custom validation, you can get component and form related information through this.rule and this.api, facilitating access to other component values during validation.

For more detailed usage, see the async-validator documentation or the form validation section in the official documentation, which can help you quickly implement diverse validation requirements and significantly improve form interaction experience.

Required Validation

Add required validation to form fields by configuring the required property. When users do not enter a name and submit the form, validation errors will be triggered and prompt messages displayed, ensuring data integrity.

Minimum Value Validation

Configure minimum value validation rules for number input components, ensuring users input numbers not less than 10, otherwise error prompt messages will be displayed, achieving precise control of data ranges.

Date Component Required Validation

Configure required validation rules for date picker components, including single date selection and date range selection modes, ensuring users must select valid date values before submitting the form.

Minimum Selection Validation

Configure minimum selection validation rules for checkbox components, requiring users to select at least 3 options, otherwise error prompt messages will be displayed, ensuring minimum selection quantity requirements are met.

Regular Expression Validation

Note

When pattern type is string, it cannot contain / symbols before and after, otherwise the regular expression will be invalid.

Use regular expressions to validate input box content, restricting users to only input numeric characters, otherwise error prompt messages will be displayed, achieving data validation for specific formats.

Custom Validation

Note

In custom validation, whether successful or failed, the callback function must be executed.

Use custom validation functions to validate input box content. Validation will only pass when users input "form-create.com", otherwise custom error prompt messages will be displayed.

Common Validation Examples

1. Required Field Validation

const rule = {
  type: 'input',
  field: 'username',
  title: 'Username',
  validate: [
    { required: true, message: 'Username is required' }
  ]
}

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

3. Regular Expression Validation

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

4. 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 {
                    callback();
                }
            },
            message: 'Enter a valid age'
        }
    ]
}

5. Enumeration Value Validation

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