【LWC】lightning-inputの入力検証

はじめに

今回はLWCでの入力値の検証方法について書いていきます。
リファレンスを読むといくつか方法がありましたので紹介します。

必須入力

1つ目は項目の必須入力です。標準機能と同様に赤い星印が表示され、入力しなかった場合エラーメッセージを表示します。
下記のようにrequired属性を追加するだけです。

<lightning-input type="text" label="入力必須" required></lightning-input>

入力値の型指定

通常のHTMLのinputタグ同様にtype属性を指定することでその属性に合わない入力をさせないことが出来ます。
今回の例はtype="email"を指定しているのでemail形式でない入力をエラーにします。message-when-type-mismatch属性でユーザに表示するエラーメッセージをカスタマイズできます。

<lightning-input name="email" class="validate" type="email" label="メールアドレス" message-when-type-mismatch="email形式で入力してください。">

最大値、最小値の設定

数値の入力時には最大値、最小値を設定することが出来ます。今回の場合は生まれた年を入力するものなので最小値0、最大値2022にしています。

<lightning-input name="number" class="validate" type="number" label="生まれ年" max="2022" min="0"></lightning-input>

正規表現を使用した入力チェック

正規表現を使用した入力チェックも出来ます。今回はpattern属性で半角英数字を指定しています。
正規表現利用できればかなり入力チェックの幅広がりますね。

<lightning-input name="num" class="validate" type="text" label="半角英数字のみ" pattern="^[0-9a-zA-Z]*$" message-when-pattern-mismatch="半角英数字のみで入力してください。"></lightning-input>

カスタムValidation

上記のエラーチェックでは対応できない入力規則がある場合はカスタムValidationを使用して臨機応変なチェックが出来ます。
今回はonblurイベントでSalesforceと入力されたらエラーにします。

<lightning-input name="email" class="customInput" type="text" label="カスタムインプット" onblur={register}></lightning-input>

register(event) {
    let input = event.target;
    let value = input.value;
    if(value === 'Salesforce') {
      input.setCustomValidity('Salesforceとは入力できません。')
    } else {
      input.setCustomValidity('');
    }
    input.reportValidity();
}

保存ボタン押下時のエラーチェック

今見てきたエラーチェックでは入力後にエラーメッセージが表示されますが、保存ボタンを押下することが出来、間違った値で登録することが出来てしまいます。そのため保存時にも入力チェックをします。
今回は保存はせずエラーがない場合はログに出力しています。

<lightning-button style="text-align: center;" label="submit" onclick={validationCheck}></lightning-button>

// 各lightning-inputのvalidationチェック
  isInputValid() {
    let isValid = true;
    let input = this.template.querySelectorAll('lightning-input');
    input.forEach(inputField => {
      if(!inputField.checkValidity()) {
        inputField.reportValidity();
        isValid = false;
      }
    });

    return isValid;
  }

  // 保存押下時に呼び出し
  validationCheck() {
    if(this.isInputValid()) {
      let input = this.template.querySelectorAll('lightning-input');
      input.forEach(inputField => {
        console.log('入力値：' + inputField.value);
      })
    }
  }

終わりに

Salesforce項目の場合入力規則が設定されていればレコード保存時に入力のチェックを出来ますが、クライアント側で入力の制御をしたい場合にもいろいろできそうですね。
まだまだ様々な方法があるので公式のリファレンスなどをご確認ください。

参考

公式リファレンス：https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation