タグ別アーカイブ: match

数字の標記編集(3桁毎のカンマ区切り)

今回はお仕事ネタです。
お仕事の内容は「入力した数字を計算して出力」と云った内容です。
今回はその機能を作る際に出された以下の条件に関してです。
 1. 全角の数字が入っていても半角に変換して表示して欲しい。
 2. 表示する数値の3桁毎にカンマ(,)を付けて欲しい。

とりあえずやってみましょう。

<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(){

                $('#button').click(function() {

                    var numVal;
                    numVal = $('#input_num').val();
                    
                    $('#dsip_num').empty();

                    // Input Check
                    if (numVal == '') {
                        $('#disp_num').text('Error : No input').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Replace
                    numVal = numVal.replace(/[0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
                    if (!(numVal.match(/^[0-9]+$/))) {
                        $('#disp_num').text('Error : No numeral').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Set Comma
                    numVal = String(numVal).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
                    $('#disp_num').text(numVal).css({'background-color':'#00ff00'});

                })

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div#main_area {
                margin      : 10px;
            }

            div#num_area {
                margin-top  : 20px;
            }

            #disp_num {
                padding     : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input id="input_num" />
            <button id="button">Set Comma</button>
            <div id="num_area"><span id="disp_num"></span></div>
        </div>

    </body>
</html>

sample

sample の text に数字(半角・全角)を入力して buttom を click すると入力した値を
半角数字にした上で「comma(,)」を追加して表示します。

うん、しっかり動きますね。
どちらも replace 関数を使用しています。
全角から半角の処理の場合は、対象の文字コードを半角の文字コードに置き換える形です。
また、カンマは数字の後ろが「数字 3文字が続き 且つ 4文字目が数字ではない文字列」の場合、
最初の数字にカンマを追加して表示しています。
・・・正規表現を文字にすると説明にくいですね。

まぁ、これで全角から半角への変換と3桁のカンマ区切りの処理が出来ました。
これでカンマ追加は怖くないですね(笑)

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

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

入力内容の確認処理

今回は textbox の入力内容チェックの方法です。
それ程難しい処理ではありませんが頻繁に使うので備忘録的に書いておきます。

<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() {

                var txtVal;
                $('#submit_check').click( function(eObj) {
                    eObj.preventDefault();

                    txtVal = $('#text_check').val();
                    if (txtVal == '') {
                        alert('Error : No input');
                        return;
                    } else if (!(txtVal.match(/^[0-9]+$/))) {
                        alert('Error : No numeral');
                        return;
                    } else if (txtVal.length > 2) {
                        alert('Error : Max Lenght Over');
                        return;
                    }

                    $('#form_check').submit();

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>

        <div id="form_area">
            <form action="" method="get" id="form_check">
                <input type="text" name="textbox" id="text_check">
                <input type="submit" value="send" id="submit_check">
            </form>
        </div>

    </body>
</html>

sample

spmple には textbox と button があります。
今回は以下の条件によってエラーを表示するか判断しています。
 ・数字のみの入力可能
 ・1 ~ 99 までの範囲が入力可能
 ・未入力はエラー
エラーの場合は submit 処理を行いません。

今回の処理として特に難しい処理はしていません。
あえて注意が必要な点として「いったん submit を無効にする」点です。

「問題がなければ実行する」はそれほど難しいものではありません。
ですが既存サイトの場合、システムを変更出来ない場合もよくあります。
そのような既存サイトに入力チェック処理を追加する時には今後も使うことになるかと思います。

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

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

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

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

私が今まで作ったプログラムでは、以下の流れでエラーチェックをしていました。
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 人がこの 投稿 は役に立ったと言っています。