yupで正規表現を使って電話番号をバリデーションしたい

Vueで入力チェックをするときに、yupを使っています。

よくある入力チェックの項目に電話番号がありますが、電話番号のような形式のチェックにはmatchesに正規表現を指定します。その正規表現の設定方法でハマったのでそのメモします。

完成系が以下のコードです。

const schema = object({
    telNumberMobile: string().matches(/^0[789]0-\d{4}-\d{4}$/, { message: '電話番号(携帯)の形式で入力して下さい。' }),
});

正規表現的としては以下のような結果になります。

090-1111-2222 〇
080-1111-2222 〇
070-1111-2222 〇
060-1111-2222 ✖
09011112222 ✖

どこにハマったのかというと、正規表現自体は問題ないです。

正規表現部分の前後に`(シングルクォート)や”(ダブルクォート)で括っていたので正しくバリデーションされませんでした。

正常にバリデーションしない状態

・・・matches("/^0[789]0-\d{4}-\d{4}$/", { message・・・

なお、

ハイフンなしであれば、正規表現のハイフン部分を削除すればOKです。

あと、ちなみに、先頭と最終文字にスラッシュ「/」が必要です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次