Using Component Internal Method Validation

Form validation can be performed within custom components through the custom property componentValidate. This feature is very suitable for implementing specific business logic validation in custom components, ensuring that user input data meets expectations.

This feature is internally implemented through custom property methods.

Type

// You can customize the method name within the component, default is `formCreateValidate`
type ComponentValidate = string | boolean;

Note

Different UI frameworks may have different implementations of validation. It is recommended to refer to the form validation rules section in the official documentation of the UI framework you are using to understand the specific implementation of validator.

Tutorial

1. Implement formCreateValidate method inside custom component

Define a method named formCreateValidate in the custom component. This method will be called during form validation. You can write validation rules in this method according to business logic.

export default {
    methods: {
        formCreateValidate(rule, value, callback) {
            // Custom validation logic
            if (value === 'form-create') {
                callback(); // Validation passed
            } else {
                callback('Enter `form-create`'); // Validation failed, return error message
            }
        }
    }
}

Using in Setup

<script setup>
  defineExpose({
    formCreateValidate(rule, value, callback) {
      // Custom validation logic
      if (value === 'form-create') {
        callback(); // Validation passed
      } else {
        callback('Enter `form-create`'); // Validation failed, return error message
      }
    }
  })
</script>

2. Set componentValidate property

Enable component internal validation through the componentValidate property in generation rules.

const rule = {
    type: 'custom-component',
    field: 'customField',
    title: 'Custom Component',
    effect: {
        componentValidate: true
    }
}

If you want to use a different method name instead of the default formCreateValidate, you can specify a custom method name in the componentValidate property:

const rule = {
  type: 'custom-component',
  field: 'customField',
  title: 'Custom Component',
  effect: {
    componentValidate: 'myCustomValidateMethod'
  }
}

Examples

The following is a simple example showing how to use componentValidate for form validation in custom components:

Complex Input Validation

In some business scenarios, you may need to perform more complex validation within custom components, such as checking whether input conforms to specific formats or rules.

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      // Suppose we want to validate whether input is a valid email address
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(value)) {
        callback(); // Validation passed
      } else {
        callback('Enter a valid email address');
      }
    }
  }
};

Form Dependency Validation

In some complex forms, the validation logic of certain fields may depend on the values of other fields. For example, if an option is selected, another input field must meet specific conditions.

export default {
    props: {
        dependentValue: {
            type: String,
            required: true
        }
    },
    methods: {
        formCreateValidate(rule, value, callback) {
            if (this.dependentValue === 'special' && value !== 'expected') {
                callback('When dependentValue is special, input must be expected');
            } else {
                callback();
            }
        }
    }
};

Asynchronous Validation

In some cases, validation may need to interact with the server, such as checking whether a username is already taken. Asynchronous validation can be used in this case.

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      if (!value) {
        return callback('Username cannot be empty');
      }
      // Simulate asynchronous request
      setTimeout(() => {
        if (value === 'alreadyTaken') {
          callback('Username is already taken');
        } else {
          callback(); // Validation passed
        }
      }, 1000);
    }
  }
};

Multi-field Association Validation

When values of multiple fields need to be validated in association, you can trigger validation of other fields from one field.

export default {
    methods: {
        formCreateValidate(rule, value, callback, {api}) {
            const fieldValue = api.getValue('relatedField');
            if (value !== fieldValue) {
                callback('Current field value must match related field value');
            } else {
                callback(); // Validation passed
            }
        }
    }
};

Complex Validation in Dynamic Form Generation

In dynamically generated forms, validation logic may need to be adjusted based on user selections or other dynamic factors.

export default {
    props: {
        dynamicRules: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        formCreateValidate(rule, value, callback) {
            for (const rule of this.dynamicRules) {
                if (!rule.validate(value)) {
                    return callback(rule.message);
                }
            }
            callback(); // All rules validated
        }
    }
};

Usage

const rule = {
  type: 'custom-component',
  field: 'dynamicField',
  title: 'Dynamic Field',
  value: '',
  effect: {
    componentValidate: true
  },
  props: {
    dynamicRules: [
      { validate: (val) => val.length >= 5, message: 'Length must be at least 5' },
      { validate: (val) => val.includes('@'), message: 'Must include @ symbol' }
    ]
  }
}

By using the componentValidate property and custom validation methods, you can easily encapsulate complex validation logic within custom components, ensuring flexibility and maintainability of form validation. This approach is very suitable for scenarios requiring dynamic validation or complex business logic.