Help us understand the problem. What is going on with this article?

正規表現で値なしor条件付き入力の制御

備忘録です。調べてもなかなか出てこなかったので苦労しましたが、実はこれだけで制御できます。

"^(任意の入力条件)?$";

あとはこれを各プログラム言語に合わせてデリミタを付与してください。

解説

()は任意の文字列のグループ化、そして?は0回か1回の繰り返しになります。そして^は接頭辞、$は接尾辞。つまり、任意の入力条件の0回か1回の繰り返しとなるので、検索用フォームやデータ入力フォームなどで、未入力か条件付き入力か制御したいときに役立ちます。
例は、家族名を入力するフォームがあり、条件としては必須入力項目ではないですが、入力の際には姓名の間に一文字空けてほしい場合などです。

<input type="text" name="family1" pattern="^((\S+ )+\S+)?$">

こうすれば、無記入か家族名入力(例:両津 勘吉など。1回以上の繰り返しにしているのはミドルネームに対応させるためです)の制御ができます。

応用編:バリデーションチェックを制御しつつ、Enterキーでの誤送信を防ぎたい

今はEnterキーでの誤転送を防止するために、\A\zの方がセオリー化してきているようですが、残念ながら、pattern属性は内部でJavaScriptによるマッチングを行う機能のため、それと同様にpattern属性では対応していません。よって、スクリプトエラーが発された状態となっているので、バリデーションチェックも素通りします。

html
<input type="text" pattern="\A((\S+ )+\S+)?\z"> <!-- 判定に関係なく通ってしまいます。 -->

そこでEnterキーを押しても、反応しないように制御します。

-Enterキーを無効にする方法

test1.html
<body>
    <form name="frm" method="post" action="test.html" >
        <label>郵便番号</label><input type="text" pattern="^(\d{3}-\d{4})?$">
        <input type="submit" value="送信">
    </form>
    <script>
        frm.addEventListener("keypress",(e)=>{
            if(e.which && e.which === 13){
                return false;
            }
        })
    </script>
</body>

これで、確かにEnterキーでの誤送信は防げている…のですが、不要なバリデーションチェックのメッセージが逐一表示されたままです。そこで、バリデーションチェックを発動させないようにイベントの伝播を阻止するpreventDefault()を用います(バリデーションチェックが行われるタイミングについては、当方の記事で触れています)

test2.html
<body>
    <form name="frm" method="post" action="test.html" >
        <label>郵便番号</label><input type="text" pattern="^(\d{3}-\d{4})?$">
        <input type="submit" value="送信">
    </form>
    <script>
        frm.addEventListener("keypress",(e)=>{
            if((e.wchich && e.which === 13){
                e.preventDefault(); //バリデーションチェックを発火させない
            }
        })
    </script>
</body>

これで\Aと\zと同様に、Enterキーによる誤送信を防止し、かつ送信ボタンがクリックされた場合のみバリデーションチェックを行うことができます。

BRSF
職業、PG・SE・DBエンジニア。オープン環境のwebプログラムをメインにシステム構築担当。使用言語はPHP(cakePHP、Laravel含)jQuery、JavaScript、ExcelVBA、Perl、Ruby、Python。現在Vue、React、Angular強化中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした