您的位置：首页 > 其它

事件实例应用(三)

2008-11-16 15:38 134 查看

[align=center]事件实例应用[/align]
在这里我们做一个在现实应用中比较常用的实例，该实例能够检查从文本窗口小部件中获取姓名和电话号码这两个表单数据是否准确。当文本框中的值变化时，即引发一个change事件，从而调用一个函数来检查这两个输入值的格式是否准确。
在这两种情况下，如果检测到一个错误，都将产生一个alert消息，并调用方法focus和select来提醒用户修改输入，而alert消息中包含正确的格式信息。对姓名来说（这是针对欧美地区人的姓名来讲的），正确的格式是依次输入姓、名字和中间名，其中名字和姓都必须以大写字母开头，并至少包含一个小写字母，名字和姓后面都必须有一个逗号，需要的话可以添加一个空格。中间名必须是一个大写字母，他们之后的小数点可有可无。整个姓名之前或之后没有任何字符。用来匹配这类姓名的格式的模式为：
/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/
需要注意的是锚符号^和模式末尾符号$的应用，他们能够阻止在姓名之前或者之后出现字符。
电话号码的正确格式是首先三个数字加一条短划线，接下来又是三个数字加一条短划线，最后是四个数字。与姓名一样，电话号码之前或之后都没有字符。因此，电话号码的模式为：
/^\d{3}-\d{3}-\d{4}$/
具体的实现程序如下图所示：

[align=left]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]
[align=left] [/align]
[align=left]<html xmlns="http://www.w3.org/1999/xhtml">[/align]
[align=left]<head>[/align]
[align=left] <title></title>[/align]
[align=left] <script type="text/javascript">[/align]
[align=left] function chkName() {[/align]
[align=left] var myName = document.getElementById("custName");[/align]
[align=left] var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\. ?$/);[/align]
[align=left] if (pos != 0) {[/align]
[align=left] alert("The name you entered (" + myName.value + ") is not the correct form.\n The correct form is :last name,first name,middle initial \n Please go back to fix your name!");[/align]
[align=left] myName.focus();[/align]
[align=left] myName.select();[/align]
[align=left] return false;[/align]
[align=left] }[/align]
[align=left] else[/align]
[align=left] return true;[/align]
[align=left] }[/align]
[align=left] function chkPhone() {[/align]
[align=left] var myPhone = document.getElementById("phone");[/align]
[align=left] var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/);[/align]
[align=left] if (pos != 0) {[/align]
[align=left] alert("The phone number you entered (" + myPhone.value + ") is not the correct form.\n The correct form is:ddd-ddd-dddd \n Please go back and fix your phone number.");[/align]
[align=left] myPhone.focus();[/align]
[align=left] myPhone.select();[/align]
[align=left] return false;[/align]
[align=left] }[/align]
[align=left] else[/align]
[align=left] return true;[/align]
[align=left] }[/align]
[align=left] </script>[/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<h3>Customer Information</h3>[/align]
[align=left]<form action="">[/align]
[align=left]<p>[/align]
[align=left] <input id="custName" type="text"/>Name(last name,first name,middle initial)[/align]
[align=left] <br /><br />[/align]
[align=left] <input id="phone" type="text" />Phone Number(ddd-ddd-dddd)[/align]
[align=left] <br /><br />[/align]
[align=left] <input id="Submit" type="submit" value="submit" />[/align]
[align=left] <input id="Reset" type="reset" value="reset" />[/align]
[align=left]</p>[/align]
[align=left]</form>[/align]
[align=left]<script type="text/javascript">[/align]
[align=left] document.getElementById("custName").onchange = chkName;[/align]
[align=left] document.getElementById("phone").onchange = chkPhone;[/align]
[align=left]</script>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]
本文出自 “范国锋” 博客，转载请与作者联系！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航