快捷導(dǎo)航

輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證

更新時(shí)間：2022年05月06日 15:04:18 投稿：lijiao

輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點(diǎn)在于EasyUI表單驗(yàn)證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下

一、EasyUI創(chuàng)建異步提交表單

本文向您展示如何通過(guò) easyui 提交一個(gè)表單（Form）。我們創(chuàng)建一個(gè)帶有 name、email 和 phone 字段的表單。通過(guò)使用 easyui 表單（form）插件來(lái)改變表單（form）為 ajax 表單（form）。表單（form）提交所有字段到后臺(tái)服務(wù)器，服務(wù)器處理和發(fā)送一些數(shù)據(jù)返回到前端頁(yè)面。我們接收返回?cái)?shù)據(jù)，并將它顯示出來(lái)。

創(chuàng)建表單（Form）

 <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>

改變?yōu)?Ajax 表單

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

服務(wù)器端代碼

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

二、EasyUI表單驗(yàn)證

將向您展示如何驗(yàn)證一個(gè)表單。easyui 框架提供一個(gè) validatebox 插件來(lái)驗(yàn)證一個(gè)表單。在本教程中，我們將創(chuàng)建一個(gè)聯(lián)系表單，并應(yīng)用 validatebox 插件來(lái)驗(yàn)證表單。然后您可以根據(jù)自己的需求來(lái)調(diào)整這個(gè)表單。

創(chuàng)建表單（form）

讓我們創(chuàng)建一個(gè)簡(jiǎn)單的聯(lián)系表單，帶有 name、email、subject 和 message 字段：

<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>

我們添加一個(gè)樣式名為 easyui-validatebox 到 input 標(biāo)記，所以 input 標(biāo)記將根據(jù) validType 屬性應(yīng)用驗(yàn)證。
當(dāng)表單無(wú)效時(shí)阻止表單提交

當(dāng)用戶點(diǎn)擊表單的 submit 按鈕時(shí)，如果表單是無(wú)效的，我們應(yīng)該阻止表單提交。

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

如果表單是無(wú)效的，將顯示一個(gè)提示信息。

以上就會(huì)針對(duì)表單進(jìn)行的講解，包括如何創(chuàng)建異步提交表單、如何進(jìn)行表單驗(yàn)證，希望這些都可以幫助到大家。

您可能感興趣的文章: