在html标准中，form标签作为表单元素，作用是将表单内诸如<input>、<select>等用户可输入编辑元素的值提交给服务器。easyui框架中，form作为一个单独的控件，功能和传统的form表单类似，并具备了很多独有的特性。
下面我们通过一个简易的用户自主注册程序，了解一下form的用法。
注册程序包含registerDemo.php、registerUser.php、demo_user.sql三个文件，registerDemo.php为用户界面，registerUser.php为逻辑处理模块，demo_user.sql为数据库表。
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
<!-- 本页构造用户界面 -->
<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
/*
* 本模块实现用户注册
*/
/* 以下是数据库信息 */
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");
/* 定义返回给请求页面的反馈数据包 */
$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来操作数据库 */
$db_pdo = new PDO(DSN, DATABASE_USER, DATABASE_PASSWORD);
$db_pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
/* 获取当前日期时间 */
$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("注册用户失败（数据库连接错误）");
}
if (!$stmt->execute(array(":user"=>$user, ":pwd"=>$pwd))) {
throw new Exception("注册用户失败（数据库赋值错误）");
}
$result["success"] = 1;
$result["msg"] = "用户注册成功！";
echo json_encode($result);
} catch (Exception $ex) {
$result["success"] = 0;
/* $ex->getMessage()用于获取try块中构造Exception时赋予的错误说明 */
$result["msg"] = $ex->getMessage();
echo json_encode($result);
}
然后来看一下效果图：
这是一个典型的并且十分简易的用户自主注册页面，在registerDemo.php页面，我们构造了一个用户界面，包括让用户输入用户名、输入密码、确认密码的三个文本框（文本框使用了easyui中的textbox组件，我们会为它专门写一篇），以及用于提交的按钮（按钮使用了easyui中的linkbutton组件，我们当然也会专门为它写一篇）。
我们使用了easyui框架中的form组件，用户一切输入就绪后，点击“注册”按钮，调用regUser方法。regUser方法对form组件调用“submit”方法进行了包装，form通过submit方法向服务器提交表单内容，从而完成注册。
接下去，我们结合上例代码，细致地说明form组件的属性、方法和事件。
form组件属性：
| 属性名称 | 属性值类型 | 属性默认值 | 描述 |
|---|---|---|---|
| novalidate | 布尔值 | false | 是否对表单内的字段进行验证。<br />1.4及以上版本支持。 |
| ajax | 布尔值 | true | 是否以ajax方式提交。<br />1.4及以上版本支持。 |
| queryParams | json对象 | {} | 额外的参数。<br />1.4及以上版本支持。 |
| url | 字符串 | null | 提交至的目标。 |
novalidate表示是否要验证表单内的字段。这个属性和form组件内的各组件息息相关。在这之前，我们再提及一个easyui框架中的组件，即validatebox，validatebox专门用于作为form表单中的输入控件，它具有输入内容验证的功能，防止空数据以其他不符合规范的数据。上例中，form里面我们用到了textbox组件，textbox依赖于validatebox，所有textbox同样具有内容验证功能（其他所有依赖于validatebox的组件都有该功能），如果novalidate属性设为true，form提交时便会对组件内的各输入组件进行验证。当然，上例代码为突出form组件本身，并没有用到textbox的验证功能。
ajax属性表示是否以ajax形式提交，传统html中的form表单是非ajax方式，easyui中的form默认是ajax方式。拿上例代码来说，ajax方式下，浏览器将registerDemo.php中的请求数据提交服务器后，依然停留在registerDemo.php页面，并等待服务器的反馈（即registerUser.php的返回数据），然后显示提示信息。如果不是ajax方式，registerDemo.php提交后，将直接跳转至registerUser.php，用户最后看到的是带有提示信息的空白页。
queryParams属性允许用户提交除了form组件内部表单元素外的参数，也就是说，除了name、pwd、pwd2之外，还想再提交给服务器几个参数，可以用queryParams属性，同样也是以post方式提交。具体用法：
$("#frmRegister").form({queryParams:{param1: "p1", param2: "p2"}});
如此一来，额外的参数param1和param2便可同三个textbox内容一起提交给registerUser.php了。
url表示表单提交到哪里，等价于传统form表单中的action，是个目标地址。
form组件方法：
| 方法名称 | 参数 | 描述 |
|---|---|---|
| submit | options | 提交表单。参数为JSON对象。 |
| load | data | 将数据加载到表单各字段中。 |
| clear | 无 | 清空表单字段值。 |
| reset | 无 | 重置表单。1.3.2及以上版本支持。 |
| validate | 无 | 验证表单，如果字段符合要求，返回true，否则返回false。 |
| enableValidation | 无 | 开启验证。1.3.4及以上版本支持。 |
| disableValidation | 无 | 关闭验证。1.3.4及以上版本支持。 |
submit方法用于提交表单，参数可有可无。本文中的代码便是没有参数的。即便有参数，用法也很简单：
<script>
$(“#fromRegister”).form("submit",{
url:"model/registerUser.php",
onSubmit:function() { …… },
success:function(data) {……}
});
</script>
参数就是一系列form组件的属性值集合，我们往往直接使用submit配合参数进行数据提交。
load方法的参数既可以是url，也可以是json，它的作用是将url或者json中的数据填充到对应的form内各组件中。
<script>
/*load方法用法一*/
$(“#fromRegister”).form("load",{
user:"guest",
pwd:"12345",
pwd2:"12345"
});
/*load方法用法二*/
$(“#fromRegister”).form("load",”data/info.json”);
</script>
load方法调用后，form组件内的三个textbox组件均被赋值，用户名输入栏内容为“guest”，两个密码框内容为“12345”。请注意，user、pwd、pwd2分别对应textbox组件所在<input>标签中的name属性。如果是url，那么url对应的页面内容也应该为json。
clear方法清空form组件内其他组件或元素的值。
reset方法则将form组件内其他组件或元素重置成默认值。reset与clear不同，很多组件的默认值不为空，例如用户名默认为admin。
validate对form组件内所有具有内容验证功能的组件进行验证，全部符合要求返回true,否则返回false。
enableValidation和disableValidation分别为开启验证功能和关闭验证功能。
form组件事件：
| 事件名称 | 参数 | 描述 |
|---|---|---|
| onSubmit | param | 表单提交前触发。 |
| success | data | 表单成功提交后触发。 |
| onBeforeLoad | param | 加载数据前触发。 |
| onLoadSuccess | data | 数据加载完成后触发。 |
| onLoadError | 无 | 数据加载出错是触发。 |
onSubmit已经通过例子代码详细介绍，需要注意的是，onSubmit事件返回false时，表单不会提交给服务器，返回true才提交。参数param是属性queryParmas的值，也就是额外的请求参数。
success也在例子代码中也有详细说明，参数data为服务器返回给请求页面的数据。
onBeforeLoad、onLoadSuccess和onLoadError都和load方法有关，他们三者在load方法执行的不同阶段或不同场景分别被触发，因为比较简单，也不多做说明。参数param与onSubmit的参数一致，均为queryParmas的值。需要说明的是，onBeforeLoad事件只在“load”方法以url形式被调用时才会被触发，以json形式加载本地数据时并不会触发该事件。
本文代码仅是作为介绍form组件之用，安全性缺乏保障，数据都是以明文形式在网络中进行传输，并且以明文形式存入数据库。应当通过MD5、SHA256等散列算法或其他加密算法提高数据安全性。
