テキストエリアの入力内容チェック

今回はテキストエリアの入力内容のチェックを作ってみます。

私が今まで作ったプログラムでは、以下の流れでエラーチェックをしていました。
1.入力内容を POST してPHPプログラムに渡す。
2.PHPで入力内容に対してのエラーチェックを行う。
3.エラーの場合は入力画面にエラー内容を表示する。

だけど、このやり方では「2.」の時に画面遷移が発生するんですよね・・・
というわけで、今後のために入力内容チェックを調査しながらの書き込みです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {

                $("#check").click(function() {
                
                    // 全角チェック
                    var type_1 = $("input[name='type_1']").val();
                    var err_flg = false;
                    for(var cnt = 0; cnt < type_1.length; cnt++){
                        var work_len = escape(type_1.charAt(cnt)).length;
                        if(work_len < 6){
                            err_flg = true;
                        }
                    }
                    if (err_flg == true) {
                        $("#err_type_1").text("すべて全角で入力して下さい。");
                    } else {
                        $("#err_type_1").text('');
                    }

                    // 半角英数チェック
                    var type_2 = $("input[name='type_2']").val();
                    if (type_2.match(/[^0-9A-Za-z]+/)) {
                        $("#err_type_2").text("半角英数で入力して下さい。");
                    }    else {
                        $("#err_type_2").text('');
                    }

                    // 文字数チェック
                    var length_1 = $("input[name='length_1']").val();
                    if(length_1.length > 5) {
                        $("#err_length_1").text("最大文字数は5文字です。");
                    }    else {
                        $("#err_length_1").text('');
                    }

                });

            });
        --></script>

    </head>
    <body>

        <h1>入力チェック</h1>

        <h2>全角(半角文字の入力不可)</h2>
        <input type="text" name="type_1">
        <span id="err_type_1"></span>

        <h2>半角英数(全角・記号の入力不可)</h2>
        <input type="text" name="type_2">
        <span id="err_type_2"></span>

        <h2>文字数(最大5文字)</h2>
        <input type="text" name="length_1">
        <span id="err_length_1"></span>

        <div>
            <input type="button" id="check" value="チェック">
        </div>

    </body>
</html>

sample

全角のみの入力チェックを行うときがちょっと変わってますね。
文字列のエンコードを行った上で、文字毎にバイト数(UTF-8[3] × 2Byte[2] = 6)をチェックしています。
ちょっと面倒ですよね・・・
「何かいい手があるといいな」と思いつつ「全角のみの入力ってそんなに無いからなぁ」とも思います。

まぁ、そのほかに関しては大半のチェックは正規表現で、後は応用しだいなのかなと。
正規表現なら色々と応用も利くからいいですよね。
必須チェックも文字数チェックの応用でいけるだろうし・・・

あと、簡易的なメールアドレスチェックの正規表現はこんなので出来るはず。

/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i

※注意
いろんなサイトで、「メールアドレスは正規表現ではチェック出来ない」と言う記事を見かけます。
厳密なチェックを行う場合は、そういったサイトを参考にしてください。
まぁ、正確なチェックを望む人は、最初からこのサイトを参考にしないよね・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です