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

最新推荐文章于 2020-07-09 17:50:35 发布

我想我是人

最新推荐文章于 2020-07-09 17:50:35 发布

阅读量1.6k

点赞数

分类专栏： easyui Web编程文章标签： easyui

本文链接：https://blog.csdn.net/redeg/article/details/52215818

版权

Web编程同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

easyui

26 篇文章 1 订阅

订阅专栏

　　在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);
}

　　然后来看一下效果图：
　　 form效果图
　　这是一个典型的并且十分简易的用户自主注册页面，在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等散列算法或其他加密算法提高数据安全性。

我想我是人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【连载】研究EasyUI系统——Form组件

在html标准中，form标签作为表单元素，作用是将表单内诸如、等用户可输入编辑元素的值提交给服务器。easyui框架中，form作为一个单独的控件，功能和传统的form表单类似，并具备了很多独有的特性。
复制链接

扫一扫