读书频道 > 网站 > 网页设计 > Web程序设计(第7版)
5.7.2 验证表单输入
13-02-17    奋斗的小年轻
收藏    我要投稿   

本文所属图书 > Web程序设计(第7版)

当前关于Web开发的书籍很多,但都是针对专业的开发人员,对于广大学生则往往难以理解和接受。本书由拥有30余年计算机教学经验的教授编写,专门针对大学生来讨论Web编程,充分考虑了读者的知识背景,比较全面地介...立即去当当网订购

JavaScript一种常见应用是检查用户所提交的表单中的值,判断这些值是否符合规范。如果在客户端不对这些值进行检查,就会在未经任何事先检验的情况下将表单值提交到服务器中进行处理。服务器中用于处理表单数据的程序或者脚本检查无效的输入数据。如果发现无效数据,服务器就将信息反馈到浏览器中,然后要求用户重新提交正确的输入信息。很明显,如果完全在客户端中进行输入数据检查并给用户反馈一个对话框将更为有效。这样能够将数据验证的任务从通常比较繁忙的服务器转移到客户端,在绝大部分情况下,客户端的任务都不饱满。同时,这也会减少网络流量,因为可以避免向服务器发送错误数据并在未经处理的情况下返回。此外,在客户端检测不正确的表单数据可以更快地对用户做响应。对表单数据的有效性检查经常也要通过服务器进行,其中的一部分原因在于客户端的有效性检查过程可能会被人居心不良地破坏。对于某些表单数据来说,是否合乎规范是非常重要的。一个示例是在将某些数据插入到数据库中时,如果数据不正确的话可能会损坏数据库,此时就必须进行数据有效性检查。尽管会在服务器上检查表单数据,但在客户端检测并纠正错误可节省服务器以及网络的时间。

当用户没有正确地填写某个表单输入元素,而JavaScript事件处理函数检测到这一点时,该函数会产生一个alert消息,将错误信息显示给用户,并指定该输入的正确格式。接下来,比较好的处理方式是使该输入元素获得焦点,将鼠标光标定位到该元素中。这是通过方法focus完成的,但遗憾的是,当前版本的浏览器并没有以正确而一致的操作方式实现focus方法。因此,我们不使用它。

如果某个事件处理程序返回值为false,那么其含义为通知浏览器不要执行该事件的任何默认操作。例如,如果某一个事件是单击提交按钮,其默认操作是将所有的表单数据提交到服务器进行处理。如果在submit事件发生时,其调用的事件处理程序需要验证用户输入。当检测到错误时,这个事件处理程序应该返回false,以免将错误数据发送给服务器。按照惯例,如果事件处理程序检查表单数据时发现错误,就返回false;否则返回true。

如果一个表单要求用户输入密码,而且该密码将应用到将来的会话中,通常将要求用户连续两次输入同一个密码,以便进行确认。利用JavaScript函数可以判断这两个密码是否一致。

下面示例中的表单包含两个密码输入元素、一个重置(Reset)按钮以及一个提交(Submit)按钮。在以下两种情况下都可以调用JavaScript函数来判断这两个密码是否一致。其一,当单击提交按钮时,onsubmit事件可以触发这个函数调用;其二,当第二个文本框失去焦点时,blur事件能够触发这个函数调用。该函数能够执行两种不同的检查。首先,通过判断第一个密码输入框元素的值是否为空值来确定用户是否输入了初始密码。如果此处没有输入密码,那么该函数将调用alert方法来产生一个错误消息,并返回false。其次,该函数判断输入的两个密码是否一致。如果不一致,那么函数将再次调用alert方法生成一个错误消息,并返回false。如果这两个密码一致,那么将返回true。以下是创建了两个密码文本框、重置和提交按钮的HTML示例文档,以及针对事件处理程序和事件处理程序注册的两个脚本。
<!DOCTYPE html>
<!-- pswd_chk.html
A document for pswd_chk.ps
Creates two text boxes for passwords
-->
<html lang = "en">
<head>
<title> Illustrate password checking> </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "pswd_chk.js" >
</script>
</head>
<body>
<h3> Password Input </h3>
<form id = "myForm" action = "" >
<p>
<label> Your password
<input type = "password" id = "initial"
size = "10" />
</label>
<br /><br />
<label> Verify password
<input type = "password" id = "second"
size = "10" />
</label>
<br /><br />
<input type = "reset" name = "reset" />
<input type = "submit" name = "submit" />
</p>
</form>
<!-- Script for registering the event handlers -->
<script type = "text/javascript" src = "pswd_chkr.js">
</script>
</body>
</html>

// pswd_chk.js
//   An example of input password checking using the submit
//   event
// The event handler function for password checking
function chkPasswords() {
var init = document.getElementById("initial");
var sec = document.getElementById("second");
if (init.value == "") {
alert("You did not enter a password \n" +
"Please enter one now");
return false;
}
if (init.value != sec.value) {
alert("The two passwords you entered are not the same \n" +
"Please re-enter both now");
return false;
} else
return true;
}

// pswd_chkr.js
//   Register the event handlers for pswd_chk.html
document.getElementById("second").onblur = chkPasswords;
document.getElementById("myForm").onsubmit = chkPasswords;

图5-6展示了两个密码元素已经输入内容,但还没有单击Submit Query按钮时,pswd_ chk.html在浏览器中的显示效果。


 

图5-7展示了如果输入的两个密码不一致,而又单击了示例文档pswd_chk.html中的Submit Query按钮后浏览器的显示效果。


 

接下来分析另一个示例,该示例能够检查从文本窗口部件中获取的姓名和电话号码这两个表单数据的有效性。当文本框中的值发生变化时,即引发一个change事件,从而可以调用一个函数来检查这两个输入值的格式是否准确。

对这两个输入框而言,如果检测到一个错误,都将产生一个alert消息,并提醒用户修改输入。alert消息中则包含了正确格式的信息。对于姓名来说,正确的格式应该依次是姓、名和中间名首字母,其中名和姓都必须以大写字母开头,并至少包含一个小写字母。名和姓之后都必须有一个逗号,需要的话还可以添加空格。中间名必须是大写字母。它之后的句点可有可无。在整个姓名之前或者之后不能有任何字符。用于匹配这类姓名格式的模式如下所示。
/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/

需要注意模式末尾使用了锚符号^和$。它们能够阻止在姓名之前或者之后出现字符。此外,需要注意(在名和姓之后)空格之后和句点之后问号的应用。在这里再次指出,问号限定符指的是可以存在零个或者一个受限子模式。反斜杠之后的句点表明它只能匹配一个句点。

美国电话号码的正确格式是三个数字加一条短划线,接下来又是三个数字加一条短划线,最后是4个数字。与姓名一样,电话号码之前或者之后都没有字符。因此,电话号码的模式如下所示:
/^d{3}-\d{3}-\d{4}$/

下面是一个完整的HTML示例文档validator.html,其中包含了两个文本框,用于顾客输入自己的姓名和电话号码。
<!DOCTYPE html>
<!-- validator.html
A document for validator.js
Creates text boxes for a name and a phone number
-->
<html lang = "en">
<head>
<title> Illustrate form input validation> </title>
<meta charset = "utf-8" />
<script type = "text/javascript" src = "validator.js" >
</script>
</head>
<body>
<h3> Customer Information </h3>
<form action = "">
<p>
<label>
<input type = "text" id = "custName" />
Name (last name, first name, middle initial)
</label>
<br /><br />
<label>
<input type = "text" id = "phone" />
Phone number (ddd-ddd-dddd)
</label>
<br /><br />
<input type = "reset" id = "reset" />
<input type = "submit" id = "submit" />
</p>
</form>
<script type = "text/javascript" src = "validatorr.js">
</script>
</body>
</html>

下面是validator.html的事件处理程序和事件处理程序注册的脚本。

// validator.js
//   An example of input validation using the change and submit
//   events
// The event handler function for the name text box
function chkName() {
var myName = document.getElementById("custName");
// Test the format of the input name
//   Allow the spaces after the commas to be optional
//   Allow the period after the initial to be optional
var pos = myName.value.search(
/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/);
if (pos != 0) {
alert("The name you entered (" + myName.value +
") is not in the correct form. \n" +
"The correct form is:" +
"last-name, first-name, middle-initial \n" +
"Please go back and fix your name");
return false;
} else
return true;
}
// The event handler function for the phone number text box
function chkPhone() {
var myPhone = document.getElementById("phone");
// Test the format of the input phone number
var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);
if (pos != 0) {
alert("The phone number you entered (" + myPhone.value +
") is not in the correct form. \n" +
"The correct form is: ddd-ddd-dddd \n" +
"Please go back and fix your phone number");
return false;
} else
return true;
}

// validatorr.js
//   Register the event handlers for validator.html
document.getElementById("custName").onchange = chkName;
document.getElementById("phone").onchange = chkPhone;

图5-8展示了输入内容后validator.html在浏览器中的显示效果。其中,姓名的格式是正确的,电话号码的格式却不正确。该图显示的时候,电话号码文本框并没有失去焦点,也就是说,用户尚未按下回车键或在电话号码文本框之外单击鼠标左键。


 

图5-9展示了当焦点还在图5-8中的电话号码文本框时,按下回车键后生成的警告对话框。


 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站