接下来的一步我们创建用于验证输入域的函数。这可以有多种方法完成。不论采用何种方法,有两个要点必须始终牢记。
首先,如果用户输入了错误数据,应该在焦点还保持在当前输入域上的时候就有能改正错误的机会,不要让用户事后再返回去改正错误。第二,用户如果犯了错误,应该得到提示。提示的具体细节依具体的应用程序而定。
我们从验证除了需要输入非空字符串之外没有其它要求的输入域开始。这类验证适用于姓名、地址和城市区域的输入,我们可以创建一个通用的函数处理所有这些情况。该函数名为validateString,如代码E所列。
代码E:检验字符串的代码
//Global variable set at start of script var emptyString = " field is blank. Please enter a " function validateString(myfield, s) { if (notNull(myfield.value)&& notBlank(myfield.value)) return true else { myfield.focus() alert("The " + s + emptyString + s) return false } }
函数validateString接受两个参数:第一个是指向待验证输入域的引用,另一个是用于提示用户错误情况的字符串。注意这个函数依靠我们在第一步中创建的可重用函数isNull和isBlanks来完成任务。如果这两个函数都没有返回false,函数validateString就返回true。
不论何时,一旦错误出现,validateString函数就采取三个步骤处理:
函数validateString所显示的警告信息存储在一个全局变量emptyString中,如代码E所示。在脚本开始处这一字符串变量被赋值为"field is blank. Please enter a"。函数validateString把这个字符串和接受到的字符串参数s连接起来,组成一条与所验证的输入域相对应的警告信息。例如,如果我们用如下语句调用validateString:
validateString(form.firstname, "first name")
这里字符串"first name"传给s,我们可以在图B中看到输出的提示。
图B
函数validateMemNum和validatePledge用来验证数字输入,由代码F列出。第一个函数validateMemNum用于验证我们的member#域,该域要求输入一个介于100到999之间的数字。(做的好,这表明站点有一定的会员基础。)
代码F:验证数字输入的函数
function validateMemNum(myfield) { if (isDigits(myfield.value) && isInRange(myfield.value,100, 999)) return true else { myfield.focus() alert("Invalid customer number. Please enter a three digit number between 100 and 999") return false } } function validatePledge(myfield) { if (notNull(myfield.value)) { newstring = stripChars(myfield.value, "$") if (isNumber(newstring)) return true else { myfield.focus() alert("Invalid pledge amount. Please enter a valid dollar amount.") } } return false }
函数validateMemNum同样依靠我们先前建立的可重用函数。(你是否已经总结出这个模式了?)该函数调用isDigits检查输入数据是否全是数字,然后调用isInRange检查该数字是否介于第二个和第三个参数之间。如果这些要求没有得到满足,该函数的处理方法与我们前面看到的validateString类似。
有时,除了验证整数值,还需要验证所抵押的美元数量这样包含小数点的数据。我们采用函数validatePledge。在validatePledge中,使用stripChars来剔除用户可能输入的美元符号,然后调用isNumber函数检查输入的数量是否是一个合理的整数值或小数值。
代码G列出了检验ZIP码和州缩写的代码。验证州缩写的代码举例说明了如何验证那些有限选项的输入。如果输入的待选项很少(10个或以下),你可以使用选择元素,这样可以省去验证数据的麻烦。但是,50个州的缩写将会组成一个十分笨重的列表,因此我们采用别的方法。
代码G: 验证洲和邮政编码的代码
var STATECODES = AL/AK/AZ/AR/CA/CO/CT/DE/DC/FL/GA/HI/ID/ IL/IN/IA/KS/LA/ME/MD/MA/MI/MN/MS/MO/MT/NV/NH/NJ/NM/NY/ NC/ND/OH/OK/OR/PA/PR/RI/SC/TN/TX/UT/VT/VA/WA/WV/WI/WY" function isStateCode (str) { var newstring = str.toUpperCase() if (STATECODES.indexOf(newstring) != -1 && str.indexOf("/") == -1) return true else return false } function validateState(myfield) { if (notNull(myfield.value) && isSize(myfield.value, 2) && isStateCode(myfield.value)) return true else { myfield.focus() alert("Invalid state code. Please enter 2-letter state postal abbreviation.") return false } } function validateZip(myfield) { if (notNull(myfield.value)) { newstring = stripNonDigits(myfield.value) if (isSize(newstring,5) || isSize(newstring, 9)) return true } myfield.focus() alert("Invalid zip code. Please enter 5-digit or 9-digit zip code.") return false }
由于输入的选项是有限的,所以我们把这些选项都放入一个名为STATECODES的全局字符串变量中。选项之间由斜线分隔(/)。函数isStateCode的功能就是检查输入数据能否在字符串STATECODES找到。
这个函数首先提取用户输入的字符串,将其转换为大写。通过这种方式,无论键入的缩写是何种格式(大写或小写),我们都可以用处理大写值的方式处理。然后函数检查输入的字符串能否在STATECODES找到。
if (STATECODES.indexOf(newstring) != -1
第二步检查确保用户没有输入我们使用的分隔符,/。
str.indexOf("/") == -1)
代码G也列出了validateState所调用的isStateCode函数。validateState函数使用notNull和isSize函数对输入的字符串进行基本检查,然后调用isStateCode确保该字符串是一个合理的输入。如果这些测试中有一项失败,函数就采取同前面的检验函数相同的处理方法。
代码G所列的最后一个函数用于检查ZIP码。回想一下,ZIP码由8位或者9位数字组成,头5位和其它位之间有可能被分隔符分开。我们使用stripNonDigits函数将输入的字符串重新格式化,这样就可以仅仅注意输入的数字了。在确保输入域非空之后,我们剔除所有的非数字字符,然后开始计算输入数据的长度是否符合ZIP码的长度。