輕松學習jQuery插件EasyUI EasyUI表單驗證

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

輕松學習jQuery插件EasyUI，本文的重點在于EasyUI表單驗證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下

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

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

創(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');
 }
 });

服務器端代碼

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表單驗證

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

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

讓我們創(chuàng)建一個簡單的聯系表單，帶有 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>

我們添加一個樣式名為 easyui-validatebox 到 input 標記，所以 input 標記將根據 validType 屬性應用驗證。
當表單無效時阻止表單提交

當用戶點擊表單的 submit 按鈕時，如果表單是無效的，我們應該阻止表單提交。

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

如果表單是無效的，將顯示一個提示信息。

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

您可能感興趣的文章:

基于jquery的simpleValidate簡易驗證插件
簡易驗證插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各瀏覽器，附自用版本供下載
2014-01-01
jQuery AJAX 方法success()后臺傳來的4種數據詳解
今天小編就為大家分享一篇jQuery AJAX 方法success()后臺傳來的4種數據詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
jQuery的text()方法用法分析
這篇文章主要介紹了jQuery的text()方法用法,以實例形式詳細分析了jQuery的text()方法的定義、參數與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery實現選項卡功能（兩種方法）
本文主要介紹了jQuery兩種方法寫選項卡的實例，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
Bootstrop實現多級下拉菜單功能
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文重點給大家介紹bootstrap實現多級下拉菜單功能的實例代碼，感興趣的朋友一起學習吧
2016-11-11
基于jQuery實現的水平和垂直居中的div窗口
在建立網頁布局的時候，我們經常會面臨一個問題，就是讓一個div實現水平和垂直居中，雖然好幾種方式實現，但是今天介紹時我最喜歡的方法，通過css和jQuery實現。
2011-08-08
JQuery學習總結【二】
本文主要介紹了JQuery的基本知識，如：JQuery的dom操作，動態(tài)創(chuàng)建dom節(jié)點，刪除節(jié)點，document方法等等，文章篇尾處附上實例小練習。需要的朋友可以參考下
2016-12-12
jquery寫個checkbox——類似郵箱全選功能
最近在學習jquery，今天抽空用jquery寫個checkbox——類似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
jQuery的cookie插件實現保存用戶登陸信息
保存用戶登陸信息的方法有很多，本文為大家介紹的這個方法是通過cookie插件來實現,需要的朋友可以參考下
2014-04-04
得到jQuery detach()后節(jié)點中的某個值實現代碼
需要jQuery -detach 后的dom 結構或某個值，如何獲取到呢？一直困惑著我們，不過本文將為大家解開疑惑，感興趣的朋友可以了解下，或許本文對你有所幫助
2013-02-02