Form Validation

Form scenarios are the most commonly used in Yida. When using forms, we often need to perform form item validation. In addition to providing some common built-in validation rules for different form item components, the Yida platform also provides custom form item validation capabilities to help users better manage form data and prevent the submission of dirty data.

When the data submitted by users does not pass the validation rules, an error message will be displayed below the form item and the user will be prevented from submitting the form data, as shown below:

Validation Settings

The Yida platform provides two form setting schemes, as follows:

Built-in Validation Rules

The Yida platform has built-in some common validation rules for each form component. Users only need to perform simple settings and enable the rule. For example, the minimum age setting above can be easily implemented through the following configuration:

Custom Validation Rules

The built-in form item validation methods in Yida may not cover all cases. Therefore, Yida has also added a custom rule setting scheme for each form item component, controlling form validation results through functions. The function description for custom validation rules is shown below:

// value is the current value of the form item, returns a boolean type to determine if the validation passes
function validateRule(value: any): boolean;

For example, if we need to validate whether the content of a text input box starts with "杭州", we can do it as follows:

// Whether it starts with "杭州"
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;

API

In addition to validation during form submission, form validation can also be manually triggered through the Frontend API, as shown below:

export function validate() {
  // Execute input box component validation, print errors and values in console if validation fails
  this.$('textField_kyz78exp').validate((errors, values) => {
    console.log(JSON.stringify({errors, values}, null, 2));
  });
}

Common Custom Validations

Bank Card Number Validation

Card Number Length Validation

Card number is 16 or 19 digits

function validateRule(value) {
  return value && /^([0-9]{16}|[0-9]{19})$/.test(value);
}

Card Number Validation

Use Luhn Algorithm for validation

function validateRule(value) {
  if (value && /^([0-9]{16}|[0-9]{19})$/.test(value)) {
    let total = 0;
    value.split('').reverse().forEach((item, idx) => {
      const num = parseInt(item, 10);
      total += idx % 2 ? 2 * num - (num > 4 ? 9 : 0) : num;
    });
    if (total === 0) {
      return false;
    }
    return total % 10 === 0;
  }
  return false;
}

ID Card Validation

function validateRule(value) {
  if (value && value.length === 18) {
    const coeff = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    const laststr = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
    let total = 0;
    for(let i = 0; i < 17; ++ i) {
      total+= parseInt(value[i], 10) * coeff[i];
    }
    return value[17] === laststr[total % 11];
  }
  return false;
}