使用JavaScript创建智能表单(2)

字符串对象的取子串方法就是从字符串中取出一段字符，其中以位置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创建不同功能和风格的表单进行了简单的介绍。其实，在保证能够正确的验证用户输入的信息之外，页面表单在设计时一定要多从用户角度考虑，为用户提供更加友好和方便的浏览界面，从细微处入手，给用户留下一个好印象。