入力文字種をJavaScriptで制限する＠JavaScript

JavaScript

正規表現を使って半角英数字以外が入力された場合の処理とそれ以外の処理を定義しています。

不適切な文字種が入力されて送信ボタン（確認）が押された場合には注意文言が表示されます。注意文言の色、背景色も指定しています。

四行目のform_name、telの部分をhtmlのform要素の該当要素のnameに合わせます。

<script>
function formCheck(){
    var flag = 0;
    if ( document . form_name . tel . value . match ( /[^0-9a-zA-Z_]+/ ) ){ // 半角英数字以外が入力された場合の処理
        flag = 1;
        document . getElementById( 'notice' ) . style . color= "red";
        document . getElementById( 'notice' ) . style . backgroundColor= "yellow";
    }else{
        document . getElementById( 'notice' ) . style . color= "";
        document . getElementById( 'notice' ) . style . backgroundColor= "";
    }
    if( flag ){
        window . alert( '入力内容に不備があります。' );
        return false;
    }else{
        return true;
    }
}
</script>

html

htmlのformの記述です。前述のJavaScriptの関数を呼び出すのにform要素に「onsubmit」をつけています。

入力内容に半角英数字以外が入力された場合、span#noticeの要素がハイライトされます。

<form name="form_name" method="post" action="#" onsubmit="return formCheck()">
    <table class="form">
        <tr>
            <th>Tel <span class="label label-important">※</span><span id="notice">ハイフンなしの半角英数字</span></th>
            <td class="tel"><input type="text" name="tel" placeholder="例）09012345678＊ハイフン不要" value=""></td>
        </tr>
    </table>
    <div class="btn">
        <input type="submit" class="css_btn_class" value="確認する">
    <!-- / .btn --></div>
</form>           

デモ

こちらのデモ画面で動作が確認出来ます。
入力文字種をJavaScriptで制限する

実際は「英字」は不要かと思いますので（電話番号では）、こちらは半角数字のみを許可する場合のデモです。

入力文字種をJavaScriptで制限する | 半角数字のみ許容

正規表現の部分を変更しています。

if ( document . form_name . tel . value . match ( /[^0-9]+/ ) ){ // 半角数字以外が入力された場合の処理

パーフェクトJavaScript (PERFECT SERIES 4)