超初心者が学ぶJavaScriptとreturn falseによる中断処理

はじめに

久しぶりのQiita投稿になります。２０１８文系卒未経験エンジニアです。最近は本格的に業務に携わるようになり、以前のようにPHPだけを触っていれば良いというわけにもいかなくなりました。
今回はJavaScript、ならびにVie.jsを勉強したのでそのメモ。

実装した処理

複数のIDを入力できるフォームの送信ボタンが押された際に、半角数字以外が入力されていた場合にエラー処理を出すというものです。
当初はこのようにしていました。

<input type="submit" class="btn" value="検索" v-on:click="check()">

~~

check: function() {
            var ad_group_id = this.adGroupId;
            var ad_group_ids = ad_group_id.split(/\r\n|\r|\n/);
            for (var i = 0; i < ad_group_ids.length; i++) {
                var pattern = /^\d*$/
                if (pattern.test(ad_group_ids[i]) == false) {
                    alert("半角数字を入力してください。");
                    return false;
                }
            }
            document.searchForm.submit();
        }

しかし、正規表現のチェック後アラートは出るものの、そのまま送信されてしまっていました。

正しく動くコードは以下です。

<input type="submit" class="btn" value="検索" onclick="return false" v-on:click="check()">

~~

check: function() {
            var ad_group_id = this.adGroupId;
            var ad_group_ids = ad_group_id.split(/\r\n|\r|\n/);
            for (var i = 0; i < ad_group_ids.length; i++) {
                var pattern = /^\d*$/
                if (pattern.test(ad_group_ids[i]) == false) {
                    alert("半角数字を入力してください。");
                    return false;
                }
            }
            document.searchForm.submit();
        }

inputタグ内にonclickの記述を追加しました。
onclick="return false"は一言で言うと処理を止めるための記述だそうです。
なので流れは、if文の中を通ったらアラート→return false(js内の)でjsの処理ストップ。その結果処理がストップしたままでいてくれるそう。
逆に中を通らなかった場合は、一度処理がストップした後にsubmitのフォームを呼び出しているので結果的に送信は行えるとのこと。

感じたこと

• onclickでreturn falseを記述しないと処理が走ってしまう
• jsのonclickとvue.jsのv-on:clickは共存できる(?)
• JavaScript勉強しなければなあ

最後に

まだ4月に未経験からデビューしたエンジニアなので、間違いや誤った解釈は多々あると思います。もしそのような点を発見されたらぜひ一言修正いただけますと大変助かります。