ellsif blog

愛知のフリーランス プログラマのメモ書きなど

フォーム入力をリアルタイムにチェックする(JS)

フォーム入力をチェックするJSを書きました。
一応公開しておきます。動作保障出来ませんがご自由にご利用ください。

動作サンプルはこちら。
サンプル

JS本体は以下(※jQueryが必要です)
el_validation.js

使い方(例)

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../lib/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../js/el_validation.js"></script>
    <script>
        $(document).ready(function(){
          // 入力チェックの初期化
          $.el_valid.init({
            "name":{
              "rule":[
                "required",
                "min_length[3]",
                "max_length[10]"
              ]
            },
            "email":{
              "rule":[
                "required",
                "email"
              ],
              "on":"blur"  // フォーカス移動時のみチェック
            }
          });
        });
    </script>
  </head>
  <body>
    <input type="text" id="name">
    <span id="e_name"><!--エラーメッセージ入る--></span><br>
    <input type="text" id="email">
    <span id="e_email"><!--エラーメッセージ入る--></span>
  </body>
</html>

入力チェックのルール

“rule”に配列で指定します。
required以外は未入力時チェックOKになります。(例:min_length[2]を指定した場合、未入力はOK、1文字だとエラー)

ルール パラメータ指定例 説明
required 必須
min_length min_length[10] 10文字以上入力しないとエラー
max_length max_length[100] 100文字以内で入力しないとエラー
exact_length exact_length[5] 5文字で入力しないとエラー
alpha 半角アルファベットのみ
alpha_numeric 半角英数のみ
alpha_dash 半角英数、半角アンダースコア(_)、半角ハイフン(-)のみ
numeric 半角数字
hankaku 半角英数記号のみ(半角カナはNG)
integer 整数のみ(01、0.1などはNG)
natural 自然数(正の整数)のみ(-1、0.1などはNG)
less_than less_than[10] 未満の数値のみ(10以上、文字はNG。9.99などはOK)
greater_than greater_than[100] より大きな数値のみ(100以下、文字はNG。100.1などはOK)
less_eq less_eq[10] 以下の数値のみ
greater_eq greater_eq[100] 以上の数値のみ
url 正しいURL(http://~、https://~のみOK)
email 正しいメールアドレス
tel 正しい電話番号(ハイフン有り、無しいずれも入力可能)
date 正しい日付(yyyy/mm/dd形式、2013/01/01でも2013/1/1でもOK)
time 正しい時刻(hh:mm形式、09:05でも9:5でもOK)
regex_match regex_match[^[a-z0-9]+$] 正規表現にマッチするか(やや動作に不安ありです)

わざわざ自作しなくても、jquery.validate.jsとか使えばいい気もしますが、
classにルールを入れるのが気持ち悪いのと、バリデーションの追加が自作の方が融通効きそうなので。

コメント

コメント
名前
ウェブサイト

*