【JavaScript（jQuery）】正規表現 文字チェック バリデーションチェック

概要

フォームでよくあるバリデーションチェックですが、フロント側でも実装をすることがあるため、記事にしました。

仕様

今回は、「入力させない」（正確には、入力されても即座に削除）タイプの記事にしました。
また、記事は「数字のみ入力可能」の仕様となってます。

手法

■HTML

<input type="text" name="pass" class="text js-num-only" value="">

■JavaScript（jQuery）

$(function () {
    'use strict';

    let inputNum;

    $('.js-num-only').on('input', function (e) {
        let numVal = $(this).val();
        inputNum = numVal;
        inputNum = inputNum.replace(/\D/g, '');　//数字以外は入力不可（削除）にする
        $(this).val(inputNum);
    });
});

■CSS（こちらはお好きに）

.text {
  display: block;
  padding: 8px;
  width: 150px;
  border: 1px solid #666666;
  border-radius: 6px;
  background-color: #f6f6f6;
  font-size: 1.06667rem; 
}

■実際のサイト
https://codepen.io/msksed_1129/pen/ZExQpqo

補足

正規表現には様々なパターンが考えられます。
今回は、/[^0-9]/gを設定させていただきました。
/[^a-z]/giにすると、大文字・小文字の英語を設定できたりします。
giの箇所は正規表現フラグを使ってますので、こちらも調べてみると楽しいかもしれません。