HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。

しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。
「jQuery Tools」を使う事で簡単に解決する事が可能になってます。

基本的なチェックは1行コードを追加するだけでできるようになるようです。

$("#myform").validator();

エラーメッセージのカスタマイズはCSSで実装できるとの事

/* error message */
.error {
	height:15px;
	background-color:#FFFE36;
	border:1px solid #E1E16D;
	font-size:11px;
	color:#000;
	padding:3px 10px;
	margin-left:-2px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-topleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;

	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;
}

実際の動作はデモをご覧ください。

デモ

デモ

その他のデモはこちらから。

ファイルサイズもわずか4KBとの事。すごいですね。
利用にはjQuery1.4が必要なようです。

入力チェック以外にもタブなどのUI部品も設定できるようです。
興味のある方はダウンロードしてみてはいかがでしょうか。

実際にユーザービリティやシステム設計を考えるとどちらのチェックも必要になる事が多いのですが、両方書くのは結構大変です。

そこでPHPコードを書くだけでjQueryのバリデートも同時に出力しているライブラリ「ValidForm Builder」の登場です。

詳しくは以下

使い方

以下のようなコードで実装できるそうです。

<php
//ライブラリを読み込む
require_once("libraries/ValidForm/class.validform.php");

//フォーム作成処理
$objForm = new ValidForm("contactForm", "Required fields are printed in bold.");

//テキストボックスを作成(必須)
$objForm->addField("name", "Your name", VFORM_STRING, 
    array(
        "maxLength" => 255, 
        "required" => TRUE
    ), 
    array(
        "maxLength" => "Your input is too long. A maximum of %s characters is OK.", 
        "required" => "This field is required.", 
        "type" => "Enter only letters and spaces."
    )
);



?>

激しく便利そうなので使い込んでみたいと思います。

テキストボックス、チェックボックス、ラジオボタンに整数チェック、メールアドレスチェックなどのバリデートを簡単に組み込めるようです。

SQLインジェクション対策も実装されているとの事。

これだけでセキリティ対策は万能とは言い切れませんが、作業の軽減にはなりそうですね。
興味のある方はぜひ。