Lightning Web コンポーネント(LWC) lightning-input入力値の検証方法サンプル

2023年8月8日

環境
Salesforce

操作方法
1.required属性を追加して入力必須

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

2.type属性で入力値の型を指定する

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

3.数値の入力時には最大値、最小値を設定する

<lightning-input name="number" class="validate" type="number" label="誕生日" max="2023" min="1990"></lightning-input>

4.正規表現を使用して入力チェックを行う

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