jQueryのEasyUIフォーム - フォームの検証
このチュートリアルでは、フォームを検証する方法を紹介します。 easyui validateboxフレームワークはフォームを検証するためのプラグインを提供します。 このチュートリアルでは、連絡先フォームを作成し、フォームを確認するためにvalidateboxプラグインを適用します。 その後、フォームに自分たちのニーズに応じて調整することができます。
フォーム(フォーム)を作成します
それでは、名前、メールアドレス、件名とメッセージのフィールドを持つ単純なコンタクトフォームを作成してみましょう:
<DIVのスタイル= "パディング:3pxの2ピクセル;のborder-bottom:1pxの固体#CCC">フォーム検証</ DIV> <フォームID = "FF"メソッド= "ポスト"> <DIV> <= "名前"のラベル>名前:</ label>は <必要な入力クラス= "easyui-validatebox"タイプ= "text"の名= "名前" = "真"> </入力> </ DIV> <DIV> <= "電子メール"のラベル> Eメール:</ label>は <入力クラス= "easyui-validatebox"タイプ= "text"の名= "メール"必要= "true"をvalidType = "メール"> </入力> </ DIV> <DIV> 件名<= "対象"のラベル>:</ label>は <入力クラス= "easyui-validatebox「必要なタイプ=" text "の名="件名 "="真 "> </入力> </ DIV> <DIV> < "メッセージ" =のラベル>メッセージ:</ label>は &Ltを、テキストエリア名= "メッセージ"スタイル= "高さ:60ピクセル;"&GT;&LT; / TEXTAREA&GT; </ DIV> <DIV> <入力タイプ=値=「送信」「送信」> </ DIV> </フォーム>
私たちは、inputタグにeasyui-validateboxと呼ばれるスタイルを追加するので、入力検証マークはvalidTypeの特性に応じて適用されます。
フォームが無効であるときにフォームの送信を防ぎます
ユーザーがフォームの送信ボタンをクリックすると、フォームが有効でない場合、我々は、フォームの送信を停止する必要があります。
$( '#F-F')。フォーム({ URL: 'form3_proc.php」、 onSubmit:関数(){ リターン$(この).FORM( '検証'); }、 成功:関数(データ){ $ .messager.alert( '情報'、データ、「情報」)。 } });
フォームが有効でない場合、メッセージが表示されます。