Javascript リアルタイムの入力検証

目次

FrontPage
・Random
・機械学習
・さくらVPS
・Fedora13
・SuSe10
・Docker
・Ansible
・Java
・Scala
・Python
・Ruby
・Lisp
・Computer
・GIS
・HTML
・Culture
・Link

訪問者

total: 7657
today: 5
yesterday: 2
now: 15

更新

最新の10件

人気の10件

MenuBar

これはなに？ †

• キーボードで一文字入力するごとに入力検証を行う Javascript 部品
• キーを押すこごとにエラー検証をして、エラーメッセージを表示する

Validator の使い方 †

• 検証対象のテキストボックスを Validator クラスでくるむ

  var v = new Validator(name, element, checkers);

  name	項目名
  element	検証対象のテキストボックス
  checkers	チェッククラス(一つでも、複数(配列)でもいい)

• 拡張ポイント

  .onValidationFail = function(event){} 
  .onValidationSuccess = function(event){}

  に、検証失敗・成功時の処理を上書きする。引数はイベントオブジェクト。デフォルト設定は何もしない function() が設定されている。
• 使用例

  var v1 = new Validator('項目１',document.getElementById('inp1'), new RequiredChecker());
  var v2 = new Validator('項目３',document.getElementById('inp3'), [new NumberChecker(), new RangeChecker(0,100)]);

Checker について †

• check(name,text) メソッドを持つ
• text を評価して、チェックに不合格であればエラーメッセージを返す。合格なら''を返す。
• 属性を指定できるように、クラスにしてある。たとえば RangeChecker? は、最小･最大値をコンストラクタに指定できる。

  function RequiredChecker() {
    var _this = this;
    _this.check = function(name, text) {
      if (text == '') {
        return name + 'は必須項目です';
      }
      return '';
    };
  }
  
  function AlphabetChecker() {
    var _this = this;
    
    _this.check = function(name, text) {
      if (!text.match(new RegExp('^[a-zA-Z]*$'))) {
        return name + 'にはアルファベットを入力してください';
      }
      return '';
    };
  }
  
  function NumberChecker() {
    var _this = this;
    
    _this.check = function(name, text) {
      if (!text.match(new RegExp('^[-+]?[0-9]*$'))) {
        return name + 'には数値を入力してください';
      }
      return '';
    };
  }
  
  function RangeChecker(min, max) {
    var _this = this;
    _this.min = min;
    _this.max = max;
    
    _this.check = function(name, text) {
      if (text < min || max < text) {
        return name + 'は' + min + 'から' + max + 'までの数値を入力してください';
      }
      return '';
    };
  }
  

サンプル †

• 項目１で、何も入力せずに tab キーを押すとエラーになる
• 項目２で、数値を入力するとエラーになる
• 項目３で、アルファベット or 100より大きい数値を入力するとエラーになる
• 3秒で、エラーメッセージが消えるが、×にマウスを会わせるとエラーメッセージが表示される

工夫したところ †

• Javascript で DOM を操作して、エラーメッセージを追加する
  • Javascript DOM操作
• IME入力中には検証しない
  • Javascript IME入力中の判定
• 最後のエラー発生から 3000ms 後にエラーメッセージを消す

   _this.showErrorTips = function(message) {
     _this.errorTipTimeout = (new Date()).getTime() + 3000;
     _this.errTips.innerHTML = '<a href=\"#\" class=\"tooltipf\" tabindex="-1">×<span>' + message + '</span></a>';
     setTimeout( function(){
       if (_this.errorTipTimeout < (new Date()).getTime()) {
         _this.errTips.innerHTML = '<a href=\"#\" class=\"tooltip\" tabindex="-1">×<span>' + message + '</span></a>';
       }
     },3200);
   }

  タイムアウト時刻(_this.errorTipTimeout?)を 3000ms 後に設定して、3200ms 後にエラーメッセージの切り替えを遅延実行する。
  もしも、１回目のエラーに関するエラーメッセージ表示中にさらにエラーが起きた場合には、タイムアウト時刻(_this.errorTipTimeout?)が２回目のエラーから 3000ms になり、１回目の setTimeout() では何もせず、２回目のsetTimeout() でエラーメッセージの切り替え処理がなされる。

HTML