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

2019-07-162019
53.8% (196.5/365)
July
50.1% (15.5/31)
Week 29
22.1% (1.5/7)
Day 16 Tue
55.1% (13.2/24)

訪問者

total: 7847
today: 2
yesterday: 2
now: 17

↑

更新

MenuBar

これはなに？
Validator の使い方
Checker について
サンプル
工夫したところ

これはなに？ †

キーボードで一文字入力するごとに入力検証を行う 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 '';
  };
}

↑

サンプル †

[source] [reload]

項目１で、何も入力せずに 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