正規表現・バリデーション

正規表現とは
・正規表現のパターンに一致する文字列を検索したり
・見つかった文字列を別の文字列に置換する場合に使われたり、
・入力された文字列が正規表現で表現されるパターンに一致するかどうかをチェックする時などに使われる。

※現状はvueのHTMLに組み込んでバリデーションとして使用のみ

<InputLabel for="basic_company_zip_code" value="郵便番号" />

<TextInput

id="basic_company_zip_code"

type="text"

pattern="[0-9]*" // patternで指定

title="ハイフンなしの半角数字を入力してください" // エラーメッセージ

class="mt-1 block"

v-model="form.basic_company_zip_code"

required

autocomplete="basic_company_zip_code"

/>
// 必須や、文字数制限のバリデーションはリクエストファイルに記述し、それにひっかかった際のエラーメッセージ

<InputError class="mt-2" :message="form.errors.basic_company_zip_code" />

書いておくと、保存ボタン押す前に事前にチェック入り、正規表現に沿っていなければエラーメッセージが表示される。

【よく使いそうなパターン】

郵便番号
※半角数字のみOK
pattern="[0-9]*"
"title=""ハイフンなしの半角数字を入力してください"" "

住所フリガナ
※全角のカナ、数字、記号のみOK
pattern="[ァ-ヶ０-９々〆ー－　]*"
title="全角カタカナ、数字を入力してください"        

電話・FAX
※半角数字のハイフンありの電話番号(携帯もいけるが15桁以上になる国際電話等は無理)を許可
pattern="^0\d{1,4}-\d{1,4}-\d{1,4}$"
title="ﾊｲﾌﾝありの半角数字を入力してください"        

メールアドレス
※半角英数字、@あり、@の後に最低ドット1つありを許可
pattern="[A-Za-z0-9]+@[A-Za-z0-9]+\.[A-Za-z]+"
title="半角英数字、@をつけて有効なアドレスを入力してください"            

【その他】

全角カナ・全角スペースのみOK
pattern="[ァ-ヶ　]*"
title="カタカナを入力してください"    

全角と半角カナ、全角&半角スペースのみOK
pattern="[ァ-ヶｦ-ﾟ 　]*"
title="カタカナを入力してください"    

半角カナ、半角スペースのみOK
pattern="[ｦ-ﾟ ]*"
title="半角ｶﾀｶﾅを入力してください"

全角・半角数字のみOK
pattern="[0-9０-９]*"
title="数字を入力してください"

カタカナ・数字・ハイフンのみOK
pattern="^[ァ-ンヴーｧ-ﾝﾞﾟ0-9０-９\- 　]+$"
title="カタカナまたは数字を入力して下さい"        

全角の漢字、ひらがな、カタカナ、英語、数字、記号を許可
pattern="[一-龠ァ-ヶぁ-んｦ-ﾟa-zA-Z0-9０-９Ａ-Ｚａ-ｚー！-／：-＠［-｀｛-～］]*"
title="全角で入力してください"