使用JavaScript创建智能表单

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

验证用户输入

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

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

　　采用这种方法的缺陷在于必须要求用户所使用的浏览器能够支持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创建不同功能和风格的表单进行了简单的介绍。其实，在保证能够正确的验证用户输入的信息之外，页面表单在设计时一定要多从用户角度考虑，为用户提供更加友好和方便的浏览界面，从细微处入手，给用户留下一个好印象。

使用JavaScript创建智能表单相关推荐

html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...
Silverlight智能表单(3)之XML存储
智能表单的存储要么存到数据库中,要么存到Xml文件中,以我目前的知识水平就这么两种想法了. 我最初的想法是存储到xml文件中,OK,说一下我的大体构架,该构架挺失败的(至少我是这样认为),但是我也没有 ...
智能表单一键分发，快速收集信息
功能概述智能表单是爱用旗下的表单系统,满足企业各种表单场景的使用,支持分享到微信.公众号.小程序.微博.Qzone等多种渠道. 问卷调查:极速创建各类调研问卷,如产品满意度调查.市场调研等. 报名登 ...
Python项目-Day32-HTML5-语义化标签-智能表单-选择器
Python项目-Day32-HTML5-语义化标签-智能表单-选择器 HTML5是什么? HTML5是一个新的网络标准,目标是取代现有的HTML 4.01和XHTML 1.0 标准.它希望能够减少互 ...
ABAP调试和智能表单
DEBUG基本  F5键:以循序渐进的方式执行程序行.  F6键:逐块执行程序(例如:方法.功能模块和子程序),而不进入单个代码块.  F7键:一起执行块中的所有代码行(例如:方法.函数模块和子 ...
html表单 asp验证,ASP中JavaScript处理复杂表单的生成与验证
ASP中JavaScript处理复杂表单的生成与验证更新时间:2007年03月25日 00:00:00 作者: 这里所谓的复杂表单,是指表单中包含多种不同的输入类型,比如下拉列表框.单行文本.多 ...
智能表单之mongoDB的使用
2019独角兽企业重金招聘Python工程师标准>>> 在去年工作中遇见一个较为复杂的模块:智能表单.智能表单其实就问卷星一样的东西,由客户来根据需求设计表单内容样式,然后发布出去收 ...
html5 智能表单介绍
智能表单介绍 1.XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属 ...

使用JavaScript创建智能表单

使用JavaScript创建智能表单相关推荐

最新文章

热门文章