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です。
あと、ちなみに、先頭と最終文字にスラッシュ「/」が必要です。
コメント