B. 英字と特定の記号だけの入力に制限する書き方
次に、英字と特定の記号だけの入力を求めたい場合のJavaScriptソースをご紹介いたします。本記事で用意したサンプルページ「JavaScript入力チェック例」では、「6. ID」欄に適用しています。■JavaScriptソース：
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// --------------------------------------------
// ▼英字と特定の記号の入力チェック用スクリプト
// --------------------------------------------
var targets = document.getElementsByClassName('alpha');
for (var i=0 ; i<targets.length ; i++) {
// ▼文字が入力されたタイミングでチェックする：
targets[i].oninput = function () {
var alertelement = this.parentNode.getElementsByClassName('alertarea');
if( ( this.value != '') && ( this.value.match( /[^a-zA-Z_!#%&]/ )) ) {
// ▼何か入力があって、指定以外の文字があれば
if( alertelement[0] ) { alertelement[0].innerHTML = '入力には、英字と記号「_!#$%&」だけが使えます。'; }
this.style.border = "2px solid red";
}
else {
// ▼何も入力がないか、または指定文字しかないなら
if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
this.style.border = "1px solid black";
}
}
}
// ----------
// ▲ここまで
// ----------
});
</script>
上記のソースをそのままHTMLファイルへコピー＆ペーストすれば使えます。カスタマイズしたい際に書き換える場所は太字で示してあります。このJavaScriptでは「class="alpha"」が指定された入力欄を対象にして、入力チェックを実行するよう記述してあります。基本的なソースの構造は前ページでご紹介した「数字とハイフン記号だけの入力に制限する書き方」と同じなので説明は省略し、正規表現の部分についてだけ解説しておきます。■上記の正規表現について
ここで使用している正規表現は「/[^a-zA-Z_!#%&]/」です。これは、アルファベット小文字(a～z)、アルファベット大文字(A～Z)、記号5つ(_ ! # % &)以外の文字がある場合を示しています。ここに含まれている文字以外が入力された場合に、エラーメッセージを表示します。
もし、英数字とアンダーバー「_」だけを入力可能にしたいなら以下のように書けます。
this.value.match( /[^\w]/ )「\w」はアルファベット小文字(a～z)・アルファベット大文字(A～Z)・数字(0～9)・アンダーバー「_」だけを表す特殊文字です。「/[^a-zA-Z0-9_]/」と書いても同じ意味です。
もし、アルファベット大文字と数字だけを入力可能にしたいなら以下のように書きます。
this.value.match( /[^A-Z0-9]/ )前ページでご紹介したように、数字の10文字は「\d」という特殊文字で表せますから、上記は「/[^A-Z\d]/」と書いても同じ意味です。
※上記のJavaScriptだけでは、ユーザが「送信」ボタンを押した際にエラーがあっても送信処理を中断はできません。エラーがある場合に送信処理を中止する方法は、本記事の最後でご紹介いたします。
次に、ひらがな・カタカナだけの入力に制限する書き方を見てみましょう。
