使用JavaScript创建智能表单

使用javascript创建智能表单
2000-05-26· 吕晓波·CPCW

验证用户输入

　　在我们的网站中，经常会加入一些表单，要求用户输入类似姓名或邮件地址等的个人信息。为了确保用户输入的信息符合所期望的格式，我们可以编写CGI程序或javascript脚本进行验证。上述两种方式相比较而言，后者更为理想。因为javascript脚本可以在数据被发送到服务端之前对其进行判断和处理，而CGI程序只能在服务端执行，不可避免的会增加整个服务系统的负担。

　　使用javascript的一种方法是创建一个伪提交按钮调用预先编写好的函数对用户所输入的信息进行验证。对于符合规定格式的用户数据使用submit()方法提交到服务端；而对于那些格式不正确的输入则发出警告信息。其中，伪提交按钮的代码如下：

<INPUT TYPE="button" value="Submit" onClick="validateForm()">

　　采用这种方法的缺陷在于必须要求用户所使用的浏览器能够支持javascript。如果浏览器不支持javascript或者用户关闭了javascript支持功能，浏览器将无法执行onClick事件，从而使整个脚本失去作用。

　　为了能够根据不同的用户端环境提供最佳的解决方式，可以把验证函数赋值给onSubmit属性。代码如下：

<FORM NAME="UserInfo" ACTION="/cgi-bin/submitUserInfo.pl"

METHOD="post" onSubmit="return validateForm()">

　　这样，如果用户端浏览器支持javascript，就能够正确解释onSubmit属性，并根据 validateForm()函数对用户输入信息的验证结果决定是否提交用户信息；如果客户端不支持javascript，将忽略onSubmit属性，但是仍然能够把用户信息返回到服务端。只不过这时我们需要借助CGI程序在服务端对用户数据进行验证。虽然在功能上相对复杂一些，但是第二种方法对用户更加友好，也更加智能化。

解析字符串

　　解析字符串是验证表单输入非常重要的一个方面。javascript提供了简单实用的字符串处理功能，一般情况下，我们只需要掌握以下几个字符串对象的方法即可：

String.length：字符串的长度

String.charAt(position)：字符在字符串中的所在位置

String.indexOf(searchFor [,startPosition])：在字符串中查找特定字符串的第一次出现位置

String.lastIndexOf(searchFor [,startPostion])：在字符串中查找特定字符串的最后一次出现位置

String.substring(i,j)：返回位于位置i和j之间的子字符串。

　　举例来说，我们声明了以下字符串变量：var myString = “Hello World.”;myString.length将会返回值12，这是因为myString字符串中包含12个字符。javascript从0开始计数，所以myString.charAt(0)返回字符H，myString.charAt(1)返回e，而myString.charAt(11)返回 “.”。

　　字符串对象的取子串方法就是从字符串中取出一段字符，其中以位置i为起点，在位置j结束，但是不包括位置j上的字符。例如，myString.substring(1,3)返回el而非ell。

　　字符串对象的检索方法包括indexOf和lastIndexOf两种相反操作。IndexOf返回指定字符串在字符串对象中第一次出现的位置。例如，myString.indexOf("World")返回6，即World字符串中第一个字符在myString中的出现位置。LastIndexOf方法与IndexOf完全相同，只不过是从字符串结尾处开始查找匹配字符。例如，myString.indexOf("l")返回值为2，而myString.lastIndexOf ("l")则返回9。不论是IndexOf还是LastIndexOf，当找不到所要查找的字符串时，返回值都为-1。

下面，我们来看几个具体应用。

在不同的页面之间传递参数

　　假设我们的网站上有一位名叫Mary的用户。Mary在网站的首页面上输入了自己的名称，现在我们希望当Mary点击主页面上的按钮或超敛接时，她所输入的信息将会被传送到下一个页面。

首先，我们可以设计使用如下形式的URL：
http://www.myserver.com/mypage2.htm?Mary
然后，在mypage2.htm页面中加入以下javascript代码：

//把URL赋值给字符串变量

var URLString = window.location;

//找到字符“?”的位置

var start = URLString.indexOf("?");

//计算字符串长度

var end = URLString.length;

//删除多余字符，保留用户名称

var userName = URLString.substring(start,end);

　　这样，我们就在userName变量中保存了Mary的名称，可以根据任何需要随意使用。

验证邮件地址

　　如果我们希望确保用户所输入的邮件地址中至少包含特殊字符 “@”和 “.”，可以编写如下代码：

//把邮件地址存入变量

var emailString = document．myForm.email.value;

//设定当前为有效状态

var isValid = 1;

//如果邮件地址中没有字符@则为无效

if (emailString.indexOf("@") == -1) {isValid = 0;}

//如果邮件地址中没有字符 “.”同样无效

if (emailString.indexOf(".") == -1) {isValid = 0;}

//如果格式符合规定则提交表单

if (isValid == 1) {document．myForm.submit();}

验证数字信息

　　在对象身份证，邮编以及电话号码这种数字信息进行有效性验证的时候，我们一般只关心用户输入的数字位数是否正确，是否包含除数字之外的其它字符。

　　以邮编为例，如果我们限制用户输入的数字长度为6位，则可以使用以下代码进行验证：

if (myString.length != 6) {return false;}

　　检查用户是否输入了除数字之外的其它字符的功能要稍微复杂一些。首先，我们需要设置循环流程对每一个字符进行判断。然后，我们把每一个字符与0到9这10个数字进行比较，查看是否匹配。如果每一次都能够找到匹配，则判定数据有效。代码如下：

//按照字符数设置循环

for (var i = 0; i < myString.length; i++)

{

//预设变量isNumber

isNumber = 0;

//根据0到9这10个数字进行循环，如果找到匹配则变量isNumber值为1

for (var j=0; j<10; j++) if ("" + j == myText.charAt(i)) isNumber = 1;

if (isNumber == 0) {return false;}

}

return true;

}

表单提示

　　虽然我们可以按照上文所述，使用javascript对用户的输入信息进行验证，但是很难考虑到所有可能发生的情况，因此最好的解决方法就是在页面表单输入区提供信息填写指导。例如：

　　其中，“Enter Email”可以提示用户应当在此输入邮件地址。但是这里还有一点不足之处就是用户在输入信息之前，需要手工把类似“Enter Email”这种信息提示删除。为了更加方便用户的操作，我们可以对文本框进行以下定义：

<input type="text"

name="myText"

onFocus="if (this.value==this.defaultvalue) this.value='';"

onBlur="if (this.value=='') this.value=this.defaultvalue;"

>

　　这样，当用户点击文本框准备输入信息时（onFocus），文本框查看当前值是否与默认值（该例下的默认值为Enter Email）相等。如果两值相同，则文本框认为用户还没有输入任何信息，将自动清除显示内容。当用户点击文本框之外的页面其它区域时（onBlur），文本框查看其值是否为空，如果这样，就以默认值作为当前显示内容。当然，我们也可以去掉代码中的onBlur部分，规定只要用户点击文本框，提示信息将不再出现。

小节

　　以上，我们对如何使用javascript创建不同功能和风格的表单进行了简单的介绍。其实，在保证能够正确的验证用户输入的信息之外，页面表单在设计时一定要多从用户角度考虑，为用户提供更加友好和方便的浏览界面，从细微处入手，给用户留下一个好印象。