jQuery プラグイン EasyUI EasyUI フォーム validation_jquery を簡単に学ぶ

1. EasyUI で非同期送信フォームを作成します
この記事では、easyui を通じてフォーム (Form) を送信する方法を説明します。名前、メールアドレス、電話番号のフィールドを含むフォームを作成します。 easyui フォーム プラグインを使用して、フォームを ajax フォームに変更します。フォームはすべてのフィールドをバックエンド サーバーに送信し、サーバーは一部のデータを処理してフロントエンド ページに送り返します。戻りデータを受信して​​表示します。

フォームの作成

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
 <form id="ff" action="form1_proc.php" method="post">
 <table>
 <tr>
 <td>Name:</td>
 <td><input name="name" type="text"></input></td>
 </tr>
 <tr>
 <td>Email:</td>
 <td><input name="email" type="text"></input></td>
 </tr>
 <tr>
 <td>Phone:</td>
 <td><input name="phone" type="text"></input></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" value="Submit"></input></td>
 </tr>
 </table>
 </form>

Ajax フォームに変更

 $('#ff').form({
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

サーバー側コード

form1_proc.php
 $name = $_POST['name'];
 $email = $_POST['email'];
 $phone = $_POST['phone'];
 
 echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

2. EasyUI フォームの検証
では、フォームを検証する方法を説明します。 easyui フレームワークは、フォームを検証するための validatebox プラグインを提供します。このチュートリアルでは、お問い合わせフォームを作成し、validatebox プラグインを適用してフォームを検証します。その後、このフォームをニーズに合わせて調整できます。

フォームの作成

名前、メールアドレス、件名、メッセージフィールドを備えた簡単な問い合わせフォームを作成してみましょう:

 <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
 <form id="ff" method="post">
 <div>
 <label for="name">Name:</label>
 <input class="easyui-validatebox" type="text" name="name" required="true"></input>
 </div>
 <div>
 <label for="email">Email:</label>
 <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
 </div>
 <div>
 <label for="subject">Subject:</label>
 <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
 </div>
 <div>
 <label for="message">Message:</label>
 <textarea name="message" style="height:60px;"></textarea>
 </div>
 <div>
 <input type="submit" value="Submit">
 </div>
 </form>

easyui-validatebox というスタイルを input タグに追加します。これにより、input タグは validType 属性に基づいて検証を適用します。
フォームが無効な場合にフォームの送信を禁止します

ユーザーがフォームの送信ボタンをクリックしたとき、フォームが無効であればフォームが送信されないようにする必要があります。

 $('#ff').form({
 url:'form3_proc.php',
 onSubmit:function(){
 return $(this).form('validate');
 },
 success:function(data){
 $.messager.alert('Info', data, 'info');
 }
 });

フォームが無効な場合はメッセージが表示されます。

上記では、非同期送信フォームの作成方法やフォーム検証の実行方法など、フォームについて説明していますので、皆様のお役に立てれば幸いです。