📄 85.htm
字号:
<html>
<head>
<title>建立JavaScript正则表达式库简化表单验证</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<p align="center"><script src="../../1.js"></script></a>
<body bgcolor="#ffffff" leftmargin="5" topmargin="1" marginheight="5" marginwidth="5">
<div align=center>
<table border=0 cellpadding=0 cellspacing=0 width=680 align="center">
<tbody>
</tr>
</tbody>
</table>
<table border=1 bordercolordark=#ffffff bordercolorlight=#ffffff cellpadding=0
cellspacing=0 width=680 align="center">
<tbody>
<tr>
<td bgcolor=#F9D23C height=14>
<div align=center class=H1> 建立JavaScript正则表达式库简化表单验证</font></div>
</td>
</tr>
<tr valign=top>
<td class=H1 height=36>
<p class=H1> </p>
<p> 本文介绍如何创建一个可用于任何Web页面的“正则表达式库”——通过将表单验证代码保存为一个独立的文件，我们可以避免为不同表单重写类似的验证代码，只需在HTML页面中包含这个库文件即可。
</font></p>
<p> 一、HTML元素属性与JavaScript对象属性 </font></p>
<p> 我们知道，HTML允许我们为元素指定自定义属性。如对于表单中的文本输入框元素，我们可以给它指定一个称为validator的属性：
</font></p>
<pre> < form id="exampleForm" >
< input type="text" name="input1" validator="whatsThisFor?" >
...
< /form >
</font></pre>
<p> 该属性将被浏览器的表现引擎忽略，即它对于页面的显示是没有任何影响的。不过，就像所有其它“正式的”属性一样，自定义属性对脚本语言也是可见的，即我们可以在JavaScript代码中引用它并分析它的值。当然，在IE4和N4中引用元素的方法是不同的。下面这个引用自定义属性的示例只能在IE4（及其更高版本）下工作，但其原理也适用于Netscape浏览器：
</font></p>
<pre> if(document.all.exampleForm.input1.validator=="whatsThisFor")
alert("Hello !");
else ...
</font></pre>
<p> 如果属性没有定义，则试图引用它时将返回空值，在if语句的表达式里它被视为false：
</font></p>
<pre> if(!document.all.exampleForm.input1.validator)
alert("No validator!");
</font></pre>
<p> 下面我们来看看如何在表单验证中应用这种自定义属性。 </font></p>
<p> 二、正则表达式与模式匹配 </font></p>
<p> 许多表单验证任务包含了模式匹配操作。例如我们要验证这样一个图书编号值的合法性：它或者为5个数字字符，或为10个字符——5个数字，一个连字号，再加上4个数字。虽然这些验证任务也可以用一个专用的函数来完成，但用下面这个正则表达式模式与用户输入值比较更为简便：
</font></p>
<pre> /d{5}(-d{4})?/
</font></pre>
<p> 如果你以前从来没有用过正则表达式，可以将它理解为一种指定字符模式的语言，其主要操作就是匹配。大多数字符只同它们自己匹配，如正则表达式/abc/只匹配字符串“abc”；但也提供了引用某一组字符（如全部数字）以及指定匹配字符个数的方法。在上例中：d{5}匹配的是任意5个数字，-d{4}匹配的是一个连字号加4个数字，?说明模式中的最后一个元素是可选的，可包含也可不包含。
</font></p>
<p> 三、正则表达式库及其应用 </font></p>
<p> 所谓的正则表达式库就是包含验证常用表单元素的正则表达式的脚本文件，如： </font></p>
<pre> var PatternsDict = new Object();
// 匹配图书编号
PatternsDict.bookPat = /^d{5}(-d{4})?$/;
// 匹配12:34以及75:83
PatternsDict.timePat = /^d{2}:d{2}$/;
// 匹配5:04 或12:34,但不匹配75:83
PatternsDict.timePat2=/^([1-9]|1[0-2]):[0-5]d$/;
</font></pre>
<p> 文件中还要包含下面这个提供验证功能的函数： </font></p>
<pre> function validateForm(theForm){// 若验证通过则返回true
var elArr = theForm.elements; // 将表单中的所有元素放入数组
for(var i = 0; i < elArr.length; i++)
with(elArr[i]){ // 对于表单中的每一个元素...
var v = elArr[i].validator; // 获取其validator属性
if(!v) continue; // 如果该属性不存在,忽略当前元素
var thePat = PatternsDict[v]; // 选择验证用的正则表达式
var gotIt = thePat.exec(value); // 用正则表达式验证elArr[i]的值
if(!gotIt){
alert(name + ": 输入值与正则表达式不匹配（" + v + " —— " + value + "）"); return false;}
} return true;
}
</font></pre>
<p> validateForm函数检查每一个表单元素的validator属性，若该属性不存在，脚本忽略此元素并返回循环的开头。否则，从PatternDict中获得当前元素的匹配模式。每一个正则表达式都有对应的RegExp对象，RegExp对象的exec()方法在参数与它所关联的正则表达式不匹配时返回null——此时脚本显示警告对话框。在实际应用场合，为提高效率可以在执行验证之前将这些正则表达式编译。某些输入域可能需要除了简单匹配之外更为复杂的验证。因此，除了模式库之外，还可以为常用的验证任务建立一个函数库。
</font></p>
<p> 设上述验证模式文件为valPatterns.js，将它包含到所有必需用它来验证输入的页面中，然后为每个输入框指定合适的validator属性即可。下面是应用上述valPatterns.js的一个完整示例：
</font></p>
<pre><font class="a" face="宋体"> < HTML >< HEAD >
< TITLE > formVal.HTM < /TITLE >
< SCRIPT src=" ValPatterns.js" >
< /SCRIPT >
< SCRIPT >
function showForm(theForm){
alert("表单：" + theForm.id + "已经提交");
}
< /SCRIPT >< /HEAD >
< BODY >< P >用正则表达式库验证表单示例.< /P >
< FORM id = theForm onSubmit = "return validateForm(theForm)"
Action = "javascript:showForm(theForm)" >
图书编号:
< INPUT TYPE=TEXT name=book value="12345-6789" validator=bookPat >< BR >
时 间 值:
< INPUT TYPE=TEXT name=time value="12:45" validator=timePat2 > < BR >
单击按钮提交表单：
< INPUT TYPE = SUBMIT >
< /FORM >
< /BODY >< /HTML ></font></pre>
<pre><font class="a" face="宋体">转载自Chinabyte网络学院</font></pre>
<p class=H1> </span></p>
<p> <br>
<font
color=#ffa000> <b>
</td>
</tr>
</tbody>
</table>
</div>
<p align="center"><script src="../../2.js"></script></a>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -