在html標(biāo)準(zhǔn)中，form標(biāo)簽作為表單元素幌羞，作用是將表單內(nèi)諸如<input>悠夯、<select>等用戶可輸入編輯元素的值提交給服務(wù)器癌淮。easyui框架中，form作為一個單獨(dú)的控件沦补，功能和傳統(tǒng)的form表單類似乳蓄，并具備了很多獨(dú)有的特性。
下面我們通過一個簡易的用戶自主注冊程序夕膀，了解一下form的用法虚倒。
注冊程序包含registerDemo.php、registerUser.php产舞、demo_user.sql三個文件魂奥，registerDemo.php為用戶界面，registerUser.php為邏輯處理模塊易猫，demo_user.sql為數(shù)據(jù)庫表耻煤。
demo_user.sql
/* 用戶表 */
CREATE TABLE IF NOT EXISTS demo_user
(
user_id INT AUTO_INCREMENT, /*主鍵 ，自增*/
user_name VARCHAR(16), /* 用戶名 */
user_pass VARCHAR(32), /* 密碼 */
user_date DATETIME, /* 注冊日期 */
PRIMARY KEY(user_id)
)
registerDemo.php
<!-- 本頁構(gòu)造用戶界面 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<title>registerDemo</title>
<style>
.regContainer {
width:360px;
height: 270px;
border: 1px solid lightblue;
border-radius: 5px;
text-align: center;
}
.regInput {
margin-top: 20px;
}
.regTitle {
width:100%;
margin-top: 10px;
text-align: center;
font-family: '黑體';
font-size: 16px;
}
.regDivide {
height:1px;
width:100%;
background: lightblue;
margin: 10px 0 10px 0
}
</style>
</head>
<body>
<div class="contianer">
<form id='frmRegister' method="post">
<div class="regContainer">
<div class="regTitle">FORM組件（注冊）</div>
<div class="regDivide"></div>
<div class="regInput">
<input id="user" name="user" class="easyui-textbox"
data-options="iconCls:'icon-man',width:250,height:35,prompt:'輸入用戶名'">
</div>
<div class="regInput">
<input id="pwd" name="pwd" class="easyui-textbox"
data-options="iconCls:'icon-lock',width:250,height:35,type:'password'">
</div>
<div class="regInput">
<input id="pwd2" name="pwd2" class="easyui-textbox"
data-options="iconCls:'icon-lock',width:250,height:35,type:'password'">
</div>
<div class="regInput">
<a class="easyui-linkbutton" onclick="regUser();" href="javascript:void(0)"
data-options="iconCls:'icon-add',width:80,height:30">
注冊
</a>
</div>
</div>
</form>
</div>
<script>
$("#frmRegister").form({
url:"model/registerUser.php",
onSubmit:function() {
/* 獲取用戶名密碼，$.trim過濾空格哈蝇、tab等空白字符 */
var name = $.trim($("#user").textbox("getValue"));
var pwd = $.trim($("#pwd").textbox("getValue"));
var pwd2 = $.trim($("#pwd2").textbox("getValue"));
if (name == "" || pwd == "" || pwd2 == "") {
alert("用戶名或密碼為空");
return false;
}
else if (pwd != pwd2) {
alert("兩次輸入的密碼不同");
return false;
}
return true;
},
success:function(data) {
var data = eval('(' + data + ')');
if (data.success == 1) {
alert("注冊成功");
}
else {
alert("注冊失敼准恕：" + data.msg);
}
}
});
function regUser() {
$("#frmRegister").form("submit");
}
</script>
</body>
</html>
registerUser.php
<?php
/*
* 本模塊實(shí)現(xiàn)用戶注冊
*/
/* 以下是數(shù)據(jù)庫信息 */
define ("DATABASE","mysql");
define ("DATABASE_NAME","easyuidemo2");
define ("DATABASE_USER","root");
define ("DATABASE_PASSWORD","12345");
define("DATABASE_HOST","localhost");
define ("DATABASE_TABLE_NAME", "demo_user");
define("DSN", DATABASE . ":" . "host=" . DATABASE_HOST . ";dbname=" . DATABASE_NAME . ";charset=utf8");
header("Content-Type:text/html; charset=utf-8");
date_default_timezone_set("Asia/Shanghai");
/* 定義返回給請求頁面的反饋數(shù)據(jù)包 */
$result= Array("success"=>0, "msg"=>"");
$user = trim(filter_input(INPUT_POST, "user"));
$pwd = trim(filter_input(INPUT_POST, "pwd"));
$pwd2 = trim(filter_input(INPUT_POST, "pwd2"));
if (!$user || !$pwd || !$pwd2) {
$result["success"] = 0;
$result["msg"] = "用戶名或密碼不能為空";
echo json_encode($result);
exit();
}
else if (!$pwd != !$pwd2) {
$result["success"] = 0;
$result["msg"] = "兩次輸入的密碼不同";
echo json_encode($result);
exit();
}
try {
/* 通過pdo來操作數(shù)據(jù)庫 */
$db_pdo = new PDO(DSN, DATABASE_USER, DATABASE_PASSWORD);
$db_pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
/* 獲取當(dāng)前日期時間 */
$d = date("Y-m-d H:i:s",time());
$sql = "INSERT INTO " . DATABASE_TABLE_NAME . " VALUES (NULL, :user, :pwd, '$d');";
$stmt = $db_pdo->prepare($sql);
if (!$stmt) {
throw new Exception("注冊用戶失敗（數(shù)據(jù)庫連接錯誤）");
}
if (!$stmt->execute(array(":user"=>$user, ":pwd"=>$pwd))) {
throw new Exception("注冊用戶失斉谏狻（數(shù)據(jù)庫賦值錯誤）");
}
$result["success"] = 1;
$result["msg"] = "用戶注冊成功怜跑！";
echo json_encode($result);
} catch (Exception $ex) {
$result["success"] = 0;
/* $ex->getMessage()用于獲取try塊中構(gòu)造Exception時賦予的錯誤說明 */
$result["msg"] = $ex->getMessage();
echo json_encode($result);
}
然后來看一下效果圖：
這是一個典型的并且十分簡易的用戶自主注冊頁面，在registerDemo.php頁面吠勘，我們構(gòu)造了一個用戶界面性芬，包括讓用戶輸入用戶名、輸入密碼剧防、確認(rèn)密碼的三個文本框（文本框使用了easyui中的textbox組件批旺，我們會為它專門寫一篇），以及用于提交的按鈕（按鈕使用了easyui中的linkbutton組件诵姜，我們當(dāng)然也會專門為它寫一篇）。
我們使用了easyui框架中的form組件搏熄，用戶一切輸入就緒后棚唆，點(diǎn)擊“注冊”按鈕，調(diào)用regUser方法心例。regUser方法對form組件調(diào)用“submit”方法進(jìn)行了包裝宵凌，form通過submit方法向服務(wù)器提交表單內(nèi)容，從而完成注冊止后。
接下去瞎惫，我們結(jié)合上例代碼，細(xì)致地說明form組件的屬性译株、方法和事件瓜喇。
form組件屬性：
| 屬性名稱 | 屬性值類型 | 屬性默認(rèn)值 | 描述 |
|---|---|---|---|
| novalidate | 布爾值 | false | 是否對表單內(nèi)的字段進(jìn)行驗(yàn)證。<br />1.4及以上版本支持歉糜。 |
| ajax | 布爾值 | true | 是否以ajax方式提交乘寒。<br />1.4及以上版本支持。 |
| queryParams | json對象 | {} | 額外的參數(shù)匪补。<br />1.4及以上版本支持伞辛。 |
| url | 字符串 | null | 提交至的目標(biāo)。 |
novalidate表示是否要驗(yàn)證表單內(nèi)的字段夯缺。這個屬性和form組件內(nèi)的各組件息息相關(guān)蚤氏。在這之前，我們再提及一個easyui框架中的組件踊兜，即validatebox竿滨，validatebox專門用于作為form表單中的輸入控件，它具有輸入內(nèi)容驗(yàn)證的功能，防止空數(shù)據(jù)以其他不符合規(guī)范的數(shù)據(jù)姐呐。上例中殿怜，form里面我們用到了textbox組件，textbox依賴于validatebox曙砂，所有textbox同樣具有內(nèi)容驗(yàn)證功能（其他所有依賴于validatebox的組件都有該功能）头谜，如果novalidate屬性設(shè)為true，form提交時便會對組件內(nèi)的各輸入組件進(jìn)行驗(yàn)證鸠澈。當(dāng)然柱告，上例代碼為突出form組件本身，并沒有用到textbox的驗(yàn)證功能笑陈。
ajax屬性表示是否以ajax形式提交际度，傳統(tǒng)html中的form表單是非ajax方式，easyui中的form默認(rèn)是ajax方式涵妥。拿上例代碼來說乖菱，ajax方式下，瀏覽器將registerDemo.php中的請求數(shù)據(jù)提交服務(wù)器后蓬网，依然停留在registerDemo.php頁面窒所，并等待服務(wù)器的反饋（即registerUser.php的返回數(shù)據(jù)），然后顯示提示信息帆锋。如果不是ajax方式吵取，registerDemo.php提交后，將直接跳轉(zhuǎn)至registerUser.php锯厢，用戶最后看到的是帶有提示信息的空白頁皮官。
queryParams屬性允許用戶提交除了form組件內(nèi)部表單元素外的參數(shù)，也就是說实辑，除了name捺氢、pwd、pwd2之外剪撬，還想再提交給服務(wù)器幾個參數(shù)讯沈，可以用queryParams屬性，同樣也是以post方式提交婿奔。具體用法：
$("#frmRegister").form({queryParams:{param1: "p1", param2: "p2"}});
如此一來缺狠，額外的參數(shù)param1和param2便可同三個textbox內(nèi)容一起提交給registerUser.php了。
url表示表單提交到哪里萍摊，等價于傳統(tǒng)form表單中的action挤茄，是個目標(biāo)地址。
form組件方法：
| 方法名稱 | 參數(shù) | 描述 |
|---|---|---|
| submit | options | 提交表單冰木。參數(shù)為JSON對象穷劈。 |
| load | data | 將數(shù)據(jù)加載到表單各字段中笼恰。 |
| clear | 無 | 清空表單字段值。 |
| reset | 無 | 重置表單歇终。1.3.2及以上版本支持社证。 |
| validate | 無 | 驗(yàn)證表單，如果字段符合要求评凝，返回true追葡，否則返回false。 |
| enableValidation | 無 | 開啟驗(yàn)證奕短。1.3.4及以上版本支持宜肉。 |
| disableValidation | 無 | 關(guān)閉驗(yàn)證。1.3.4及以上版本支持翎碑。 |
submit方法用于提交表單谬返，參數(shù)可有可無。本文中的代碼便是沒有參數(shù)的日杈。即便有參數(shù)遣铝，用法也很簡單：
<script>
$(“#fromRegister”).form("submit",{
url:"model/registerUser.php",
onSubmit:function() { …… },
success:function(data) {……}
});
</script>
參數(shù)就是一系列form組件的屬性值集合，我們往往直接使用submit配合參數(shù)進(jìn)行數(shù)據(jù)提交莉擒。
load方法的參數(shù)既可以是url酿炸，也可以是json，它的作用是將url或者json中的數(shù)據(jù)填充到對應(yīng)的form內(nèi)各組件中啰劲。
<script>
/*load方法用法一*/
$(“#fromRegister”).form("load",{
user:"guest",
pwd:"12345",
pwd2:"12345"
});
/*load方法用法二*/
$(“#fromRegister”).form("load",”data/info.json”);
</script>
load方法調(diào)用后，form組件內(nèi)的三個textbox組件均被賦值檀何，用戶名輸入欄內(nèi)容為“guest”蝇裤，兩個密碼框內(nèi)容為“12345”。請注意频鉴，user栓辜、pwd、pwd2分別對應(yīng)textbox組件所在<input>標(biāo)簽中的name屬性垛孔。如果是url藕甩，那么url對應(yīng)的頁面內(nèi)容也應(yīng)該為json。
clear方法清空form組件內(nèi)其他組件或元素的值周荐。
reset方法則將form組件內(nèi)其他組件或元素重置成默認(rèn)值狭莱。reset與clear不同，很多組件的默認(rèn)值不為空概作，例如用戶名默認(rèn)為admin腋妙。
validate對form組件內(nèi)所有具有內(nèi)容驗(yàn)證功能的組件進(jìn)行驗(yàn)證，全部符合要求返回true,否則返回false讯榕。
enableValidation和disableValidation分別為開啟驗(yàn)證功能和關(guān)閉驗(yàn)證功能骤素。
form組件事件：
| 事件名稱 | 參數(shù) | 描述 |
|---|---|---|
| onSubmit | param | 表單提交前觸發(fā)匙睹。 |
| success | data | 表單成功提交后觸發(fā)。 |
| onBeforeLoad | param | 加載數(shù)據(jù)前觸發(fā)济竹。 |
| onLoadSuccess | data | 數(shù)據(jù)加載完成后觸發(fā)痕檬。 |
| onLoadError | 無 | 數(shù)據(jù)加載出錯是觸發(fā)。 |
onSubmit已經(jīng)通過例子代碼詳細(xì)介紹送浊，需要注意的是梦谜，onSubmit事件返回false時，表單不會提交給服務(wù)器罕袋，返回true才提交改淑。參數(shù)param是屬性queryParmas的值，也就是額外的請求參數(shù)浴讯。
success也在例子代碼中也有詳細(xì)說明朵夏，參數(shù)data為服務(wù)器返回給請求頁面的數(shù)據(jù)。
onBeforeLoad榆纽、onLoadSuccess和onLoadError都和load方法有關(guān)仰猖，他們?nèi)咴趌oad方法執(zhí)行的不同階段或不同場景分別被觸發(fā)，因?yàn)楸容^簡單奈籽，也不多做說明饥侵。參數(shù)param與onSubmit的參數(shù)一致，均為queryParmas的值衣屏。需要說明的是躏升，onBeforeLoad事件只在“l(fā)oad”方法以url形式被調(diào)用時才會被觸發(fā)，以json形式加載本地數(shù)據(jù)時并不會觸發(fā)該事件狼忱。
本文代碼僅是作為介紹form組件之用膨疏，安全性缺乏保障，數(shù)據(jù)都是以明文形式在網(wǎng)絡(luò)中進(jìn)行傳輸钻弄，并且以明文形式存入數(shù)據(jù)庫佃却。應(yīng)當(dāng)通過MD5、SHA256等散列算法或其他加密算法提高數(shù)據(jù)安全性窘俺。
