5.4　共通功能：使用JavaScript进行输入数据的检查

在本网站的用户注册子系统中，将有用于输入用户信息的页面，因为要向数据库中登录信息，要事先进行输入数据有效性的检查。进行数据库检查通常有两种方式：客户端脚本的检查方式与服务器检查方式。本节首先介绍如何编写客户端脚本的检查函数。具体界面如图5-1所示。

要点

可以编写客户端脚本的语言有很多种，如JavaScript与VBScript。而且，客户端脚本与浏览器有依存关系，不同的浏览器支持不同的语言。就算是同一种脚本语言，在不同的浏览器上也会有微小的不同。本书采用了在各种浏览器上有广泛支持的JavaScript。

客户端检查因为不用于服务器进行通信，而拥有速度快的特点，但是受制于客户端的设置，如果客户端将脚本支持设置为禁止的话，输入检查就无效了。

JavaScript脚本可以以放在<script>对中的形式嵌入在HTML或PHP等文件中，也可以将脚本程序放在.js或.inc等文件中，可以在多个页面中使用。本章采用就是以共通功能的形式，将JavaScript脚本放在.js文件中，定名为CheckUtil.js。

CheckUtil.js文件中首先定义了一个包含所有函数的类——CheckUtil，最后罗列出了CheckUtil.js文件中的函数组成如表5-2所示。关于CheckUtil.js文件的使用方法参见本节最后的补充资料。

表5-2　CheckUtil类中可以使用的函数

目录结构

代码

定义CheckUtil类的初始化函数，在其中追加版本与错误信息字符串的定义。在JavaScript中在私有变量前加“_”，其实定义的私有变量在用法上与其他变量没有任何区别，这样做，只是从命名规则上区分私有变量与公开变量。

定义CheckUtil类的成员函数。JavaScript prototype形式的编程方法，可参照有关书籍或资料。

getErrors方法先判断_errs中的错误信息是否为空，为空说明没有输入项目发生错误，返回true。否则显示收集的错误信息，并返回false。

requiredCheck方法对文字输入框等进行必须输入检查。没有输入时，将显示错误信息。注意以下所有的错误信息的最后都加上了“\r”的换行符。

requiredRadioCheck方法对单选框、多选框等输入项目进行是否选择的检查。选中其中之一，返回true。

lengthCheck方法对输入字符串进行是否超过指定长度的检查。

passwordCheck方法是专用的密码与确认密码的比较检查函数。二者相同时，返回true。

passwordChgCheck方法是密码修改的检查方法，进行密码修改时，必须输入与上一次不同的密码。

numberTypeCheck方法是用来判断输入字符是否是数字，如果不是则返回错误。

dateTypeCheck方法是判断输入的字符串是否为正确的日期格式（格式为YYYY/MM/DD，10位数字），当输入的日期的格式不同时，请修改方法的逻辑。

rangeCheck方法对输入的数字进行大小范围的检查，在设定的范围外时返回false。其中max为设定的最大值，min为最小值。

方法检查输入的字符串是否符合指定的正则表达式。关于正则表达式的有关知识请参照有关资料（在百度或Google等搜索引擎中检索“正则表达式”，会找到许多有用的资料）。

CheckUtil类的使用方法

CheckUtil.js用于需要进行输入数据检查的任意html，tpl，php等文件，使用方法如下。

使用前必须将CheckUtil.js文件包含进来。本章的实例中会在master.tpl文件中统一做此动作。

Chk函数在用户单击“提交”按钮时调用。对应的事件可以为Onsubmit，onclick，onchange等。

初始化CheckUtil类。

进行各个输入项目的检查。

如document.fm.name.value为form内的name项目的输入值。汉字部分输入项的名称。

检查结束时，当发生错误时，getError方法会返回false，由其收集所有的错误信息，并以弹出框的形式显示，否则返回true。

在onsubmit事件中调用chk函数。

都是些固定的写法，使用CheckUtil.js后，就算要追加检查项目，相对检查逻辑来说，都挺简单的。