您的位置：首页 > 产品设计 > UI/UE

【连载】研究EasyUI系统——Form组件

2016-08-15 23:06 579 查看

　　在html标准中，form标签作为表单元素，作用是将表单内诸如、等用户可输入编辑元素的值提交给服务器。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	是否对表单内的字段进行验证。 1.4及以上版本支持。
ajax	布尔值	true	是否以ajax方式提交。 1.4及以上版本支持。
queryParams	json对象	{}	额外的参数。 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组件所在标签中的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等散列算法或其他加密算法提高数据安全性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui

相关文章推荐

新的分享

章节导航