フォーム検証

フォームシナリオは宜搭で最もよく使用されるシナリオです。フォームを使用する際、フォーム項目の検証作業が必要になる場面がよくあります。宜搭プラットフォームは、異なるフォーム項目コンポーネントにいくつかの一般的な検証ルールを内蔵しているだけでなく、カスタムフォーム項目検証機能も提供しており、ユーザーがフォームデータをより適切に管理し、不正データの送信を防ぐのに役立ちます。

ユーザーが送信したデータが検証ルールを通過しない場合、フォーム項目の下部にエラーメッセージが表示され、ユーザーがフォームデータを送信できないようにします。効果は以下の通りです：

検証設定

宜搭プラットフォームは2つのフォーム設定方式を提供しており、それぞれの設定方式は以下の通りです：

内蔵検証ルール

宜搭プラットフォームは各フォームコンポーネントにいくつかの一般的な検証ルールを内蔵しており、ユーザーは簡単な設定でそのルールを有効にするだけで済みます。例えば上の最小年齢設定は、以下のように設定することで簡単に実現できます：

カスタム検証ルール

宜搭に内蔵されているフォーム項目検証方法はカバーしきれない場合もあるため、宜搭は各フォーム項目コンポーネントにカスタムルール設定方式を追加しており、関数を使用してフォーム検証結果を制御します。カスタム検証ルールの関数の説明は以下の通りです：

// value はフォーム項目の現在の値、boolean型を返して検証の可否を判断
function validateRule(value: any): boolean;

例えば、テキスト入力ボックスの内容が「杭州」で始まっているかどうかを検証する必要がある場合、以下のようにします：

// 「杭州」で始まっているかどうか
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;

API

フォーム検証はフォーム送信時だけでなく、フロントエンドAPIを通じて手動でトリガーすることもできます。以下を参照してください：

export function validate() {
  // 入力ボックスコンポーネントの検証を実行し、検証に失敗した場合はコンソールにerrorsとvaluesを出力
  this.$('textField_kyz78exp').validate((errors, values) => {
    console.log(JSON.stringify({errors, values}, null, 2));
  });
}

一般的なカスタム検証

銀行カード番号検証

カード番号長さ検証

カード番号は16桁または19桁

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

カード番号検証

Luhn アルゴリズム 検証を使用

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;
}

身分証明番号検証

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;
}