前の記事 ≪:file_get_contentsでのアクセス時にUserAgentを変更する方法
次の記事 ≫:ビジュアルにドラッグ&ドロップでCSSレイアウトをデザインできる「YA...

JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」

2007年09月07日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
LiveValidation - Validation as you type
Lets face it, forms are boring, validation is a pain. It’s time to inject some life into them, make them fun again...

JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」。



このライブラリを使ってできることは、examples にまとまっています。
数字、長さ、メールかどうかなど、値チェックに必要なものは殆どそろっているので簡単に実装できます。

コードは次のようにオブジェクト指向で非常にシンプル。

var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!" } );
sayHello.add( Validate.Presence,
    { failureMessage: "Don't just ignore me, I wanna be your friend!" }
);
sayHello.add( Validate.Format,
    { pattern: /hello/i, failureMessage: "How come you've not said 'hello' yet?" }
);

Validate.Presense で、入力必須項目として扱います。failureMessage でエラーメッセージ指定。
Validate.Format で、入力値の妥当性チェックが行えます。pattern で適切な正規表現を指定し、failureMessage でエラーメッセージです。

sayHello.add( Validate.Numericality, { is: 2000 } ); で、数字の2000かどうかをチェックすることもできるようです。

出来ることは documentation に綺麗にまとまっているので、リアルタイムに値チェックを行いたい場合に活用しましょう。

関連の記事検索:JavaScript, ライブラリ, validation, Ajax, フォーム, PHP
スポンサード リンク

By.KJ : 2007年09月07日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)