 | ||||||
 |
 |
 |
||||
 |
 |
 |
 |
 |
 |
 |
| ||||||
|
Kumu.ValidatorとはKumu.Validatorはクライアントサイドで入力チェックをするために作られたjavascriptのライブラリです。 Kumu.Validatorはkumu.jsおよびevent.jsに依存しています。 そのため、kumu.js、event.jsを必ず先に読み込んでおく必要があります。 Kumu.Validatorは以下の機能を提供します。
入力チェックKumu.Validatorはクライアントサイドの入力チェックを行います。 入力チェックはJSONに設定を記述します。特別にjavascriptの関数を作成するし、呼ぶ必要は一切ありません。 入力チェックはKumuValidatorConfに記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ValidateSample</title>
<link rel="stylesheet" type="text/css" href="../js/jsunit/css/jsUnitStyle.css">
<script language="JavaScript" type="text/javascript" src="./js/kumu.js"></script>
<script language="JavaScript" type="text/javascript" src="./js/event.js"></script>
<script language="JavaScript" type="text/javascript" src="./js/validate.js"></script>
<script language="JavaScript" type="text/javascript">
function test(element, result){
if(result){
element.style.background = '#ffffff';
}else{
element.style.background = '#cc00ff';
}
}
KumuValidatorConf = {
test : ['Required','Integer','MinLength:2','MaxLength:5'],
test1 : ['Required','RegularExpression:[A-Z]'],
test2 : {'RegularExpression:([a-z]){2}' : test },
ok : 'result',
cancel : 'result'
}
</script>
</head>
<body>
<table border="1">
<tr>
<td> ['Required','Integer','MinLength:2','MaxLength:5']</td>
<td><input type="text" name="test" value=""></td>
</tr>
<tr>
<td>['Required','RegularExpression:[A-Z]']</td>
<td><input type="text1" name="test1" value=""></td>
</tr>
<tr>
<td>{'RegularExpression:([a-z]){2}' : test } override showResult</td>
<td><input type="text2" name="test2" value=""></td>
</tr>
</table>
<input type="submit" name="ok" value="ALL_OK">
<input type="reset" name="cancel" value="CANCEL">
</body>
</html>
KumuValidatorConfにはproperty名に要素のname属性、値にvalidatorの種類を配列で設定します。 ひとつの要素に複数のvalidatorをかけることも可能です。 入力チェックに必要なパラメータを":"で区切って渡す事もできます。パラメータは使用するvalidatorによって異なります。 パラメータはひとつのみ渡す事が可能です。 入力チェックでエラーになった場合の動作もオーバーライドして変更することができます。 オーバーライドするには設定にobjectを渡し、property名にvalidatorの設定、値にエラー時に呼ばれる関数を設定します。 エラー時に呼ばれる関数は対象の要素、入力チェックの結果を渡され実行されます。
// エラー時にはresultはfalseになる
// この例だとエラー発生時には要素のバックグラウンドを#cc00ffにしている
function test(element, result){
if(result){
element.style.background = '#ffffff';
}else{
element.style.background = '#cc00ff';
}
}
// エラー発生時の動作をオーバーライド
KumuValidatorConf = {
test2 : {'RegularExpression:([a-z]){2}' : test },
}
標準で以下のvalidatorを提供しています。
submitボタンの無効化Kumu.Validatorは入力チェック時に指定したsubmitボタンを無効化することができます。 入力チェックを全てパスするとsubmitボタンが使えるようになります。 無効化するsubmitボタンを指定するにはKumuValidatorConfのproperty名に無効化したいボタンのname属性、値には'result'と設定します。
KumuValidatorConf = {
test : ['Required'],
ok : 'result',
cancel : 'result'
}
モードの切り替えKumu.Validatorはデフォルトでname属性を指定して動作しています。 Kumu.Validatorは要素を特定するためにname属性ではなくid属性に切り替える事ができます。 idモードを使うにはKumu.Validator.modeIdへtrueをセットします。
Kumu.Validator.modeId(true);
KumuValidatorConf = {
test : ['Required','Integer','MinLength:2','MaxLength:5'],
ok : 'result',
cancel : 'result'
}
Validatorの自作Kumu.Validatorではvalidatorを自作する事も可能です。 validatorを自作する事はそれほど難しくありません。 ですが自作validatorも含め、validatorは必ず以下の仕様を満たさなければいけません。
validate関数は実際に評価を行う関数です。引数に入力した値が入ってきます。 validate関数はbool値で結果を返さなくてはいけません。 またvalidatorを呼び出すまでの仕組みなどはKumu.Validator.ValidatorBaseが持っています。 そのため、自作validatorを作成する際にはKumu.extendsあるいは以下のようにしてValidatorBaseのpropertyを引き継がなければいけません。
Kumu.Validator.FooValidator = function(){
this.validate = function(v){
var re = /^[-]?\d*$/;
var v = v.toString();
if(!v.match(re)){
return false;
}else{
return true;
}
}
}
Kumu.Validator.FooValidator.prototype = new Kumu.Validator.ValidatorBase();
自作validatorを呼び出すにはvalidatorの名前から'Validator'を取り除きます。 上記の例だと'Foo'で呼び出す事ができます。
KumuValidatorConf = {
test : ['Foo']
}
また引数を渡すvalidatorを作成する事も可能です。 引数を渡す場合には作成した関数に引数を設定できるように作成します。 但し、引数はひとつだけしか渡すことはできません。
Kumu.Validator.BarValidator = function(value){
this.value = value;
this.validate = function(v){
var v = v.toString();
if(v < this.value){
return true;
}else{
return false;
}
}
}
Kumu.Validator.BarValidator.prototype = new Kumu.Validator.ValidatorBase();
設定は以下のようになります。
// 10以上はエラー
KumuValidatorConf = {
test : ['Bar:10']
}
リファレンスKumu.Validator.modeId(boolean)設定をname属性ではなくid属性で動作するように設定します。 Kumu.Validator.RegularExpressionValidator(pattern)正規表現チェックを行います。 引数に正規表現のパターンを指定します。
KumuValidatorConf = {
test : ['RegularExpression:[A-Z]']
}
Kumu.Validator.MinRangeValidator(range)最小値チェックを行います。 引数に最小値を指定します。
// 0以上
KumuValidatorConf = {
test : ['MinRange:0']
}
Kumu.Validator.MaxRangeValidator(range)最大値チェックを行います。 引数に最大値を指定します。
// 10以下
KumuValidatorConf = {
test : ['ManRange:10']
}
Kumu.Validator.MinLengthValidator(range)最小文字数チェックを行います。 引数に最小文字数を指定します。
// 0文字以上
KumuValidatorConf = {
test : ['MinLength:0']
}
Kumu.Validator.MaxLengthValidator(range)最大文字数チェックを行います。 引数に最大文字数を指定します。
// 10以下
KumuValidatorConf = {
test : ['ManLength:10']
}
|
|
|
|
|
|
Copyright© 2005-2006, The Seasar Foundation and the others. All rights reserved. |