EasyUI表单.PDF

第 2 章 EasyUI表单 表单（Form ）是Web 前端开发中最常用的标记之一，通常使用表单来提交用户输入的数 据以及上传文件。一个表单由三部分组成：表单标记、表单域、表单按钮。表单作为用户与服 务器交互的重要枢纽，频繁受到各类恶意攻击，在设计表单时通常需要对表单域内的各类控件 进行细致的过滤，这无疑增加了我们的开发难度。EasyUI 提供了丰富的表单控件，可以帮助 我们快速设计一个功能强大的表单。本章将先介绍表单域内的常用组件，再将详细介绍如何初 始化 以及提交表单。 本章主要涉及的知识点有： 各类表单组件的使用方法。 EasyUI 中值的含义。 EasyUI 组件的依赖关系。 表单的提交和初始化。 2.1 文本框简介 文本框通常用来接收用户输入的数据。我们先来看一个使用 HTML 设计的登录页面，部 分代码如下： 01 div账号input type=text/div 02 div密码input type=password/div 03 button提交/button 运行结果如图 2.1 所示。 图 2.1 HTML 登录页面 第 2 章 EasyUI 表单 读者先想一想这个登录页面有哪些问题 。 首先我们没有限制账号、密码文本框为必填字段，这就导致登录用户可以什么也不输入就 向服务器发送一个无效的登录请求。 其次如果后端开发人 设计的登录校验 SQL 语句为： SELECT * FROM accounts WHERE username=账号 AND password = 密码 正常情况下用户在账号输入框内输入admin，在密码输入框内输入password，后台执行 的 SQL 语句就为： SELECT * FROM accounts WHERE username=admin AND password = password 但是如果在账号输入框内输入admin AND 1=1 /*，在密码输入框内输入任意字符串，那 么后台执行的 SQL 语句就变成了： SELECT * FROM accounts WHERE username=admin AND 1=1 /* and password = aaa 可以看到数据库实际执行的 SQL 为： SELECT * FROM accounts WHERE username=admin AND 1=1 “/* ”后面的 SQL 语句被当作注释而忽略掉 了，此时用户就可以绕开密码登录系统。 SQL 注入以及 XSS 攻击等常见的网络攻击手段，其根本原理就是用户输入的数据没有经 过充分的检查和过滤，意外变成了代码被执行，我们在设计表单的各个输入控件时，一定 要进行相应的过滤，如限制用户只能输入数字、用户输入长度不能超过指定范围等 要解决上述问题我们必须限制账号、密码文本框的输入内容，例如限制账户、密码不能为 空；限制用户输入的长度不能超过指定值，此外还需要限制账号文本框的输入仅能为字母、数 字或者下画线。在提交表单前，我们还需要检查每个字段的输入是否合法。要做到这些我们需 要设计大量的JavaScript 逻辑进行判断，这无疑增加了前端开发的难度。 针对这个开发难点，EasyUI 提供了验证框（ValidateBox ）来帮助开发者对用户输入的内 容进行验证 。 2.1.1 验证框（ValidateBox ） 验证框是为了防止提交无效字段而设计的，当用户输入无效值时，它将改变背景颜色，并 且显示警示图标和提示消息。验证框的默认配置定义在$.fn.validatebox.defaults 中。 许多初学者会误以为文本框（TextBox）为 EasyUI 中最基本的输入框，验证框扩展于文本 框。其实在 EasyUI 中文本