设为首页   |  加入收藏夹 快速导航:  热门文章  |  最新文章  |  梦想博客  
当前位置:编程之家 -> 文章频道 ->html 
站内搜索:  

表单校验(2)

作者:apple 来源:apple.com.cn 整理日期:2007-07-10

function checkPassword (strng) {
var error = "";
if (strng == "") {
    error = "You didnt enter a password.\n";
}
    var illegalChars = /[\W_]/; // allow only letters and numbers
    if ((strng.length < 6) || (strng.length > 8)) {
       error = "The password is the wrong length.\n";
    }
    else if (illegalChars.test(strng)) {
      error = "The password contains illegal characters.\n";
    }

对于密码的本身,我们希望对用户严格一些,这也是为用户自身的利益着想。我们不希望他们选择容易被入侵者猜到的密码,比如字典上的一个词,或者小孩的生日。因此我们希望每个密码都由大小写的字母混合而成,并且最少有一个数字。我们用三个规则表达式来描述这些规则:a-zA-Z,和0-9,每个规则表达式后面跟着一个+号,表示“一个或者多个”,并且用 search() 方法来确保密码字符串中存在相应的字符:

else if (!((strng.search(/(a-z)+/))
  && (strng.search(/(A-Z)+/))
  && (strng.search(/(0-9)+/)))) {
  error = "The password must contain at least one 
    uppercase letter, one lowercase letter,
    and one numeral.\n";
  }

checkEmail()

下面我们希望看看用户输入的电子邮件地址是否真实。完成这个任务最有效的办法是看看用户自己声称来自哪里,然后通过网络向相应的域询问这个人是否真的有账户。但是这样会使运行这个检查程序的机器付出很大的代价—而且用 JavaScript 无论如何也不能实现这个功能。通过 JavaScript,我们可以检查用户输入的字符串看起来是否象一个电子邮件地址。我们希望这个字符串遵循如下的格式:一些字符,然后是一个at符号(@),接着又是一些字符,然后是一个点(.),还有两个或者三个字符串,就这些。这种方法并不是完美的—可能会有一些假的,不遵循RFC的地址逃过这种检查—但是通常情况下,这就足够了。如果输入的电子邮件地址没有和这种模式相匹配,我们就拒绝这个输入。

描述上述格式的规则表达式如下所示:/^.+@.+\..{2,3}$/。其中克拉符号(^)表示字符串的开始,而美元符号($)表示字符串的结束。用这些符号把剩下的规则表达式包围起来,我们可以保证程序对整个字符串进行匹配,而不只是其中的一部分。每一个 .+ 符号表示“最少有一个字符”—点(.)表示“任何字符”,后面接一个加号(+),您可能还记得,表示“一个或多个”。.{2,3}部分表示“两个或者三个字符”。如果您希望匹配一个点,则需要用反斜杠来进行转义。这就是我们使用\.的原因。

var emailFilter=/^.+@.+\..{2,3}$/;
if (!(emailFilter.test(strng))) { 
       error = "Please enter a valid email address.\n";
}

同样地,我们希望通过检查确保输入的字符串中没有禁用的字符。对于电子邮件地址,我们禁用下面这些字符:( ) < > [ ] , ; : \ / "

var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/
if (strng.match(illegalChars)) {
   error = "The email address contains illegal characters.\n";

}

checkPhone()

     在检查电话号码时,我们首先希望清除输入字符串中的间隔字符,比如括号,横杠,和点。我们可以通过规则表达式和 replace() 函数将输入字符串中的匹配字符代替为 null 字符串,从而实现这个目的。在做完这个检查之后,我们把结果传递给 isNaN() 函数(检查一个给定的输入是否不为一个数字),检测经过上述处理后的输入字符串是否为一个整数。如果它包含除了数字外的其它字符,我们就拒绝这个输入。

var stripped = strng.replace(/[\(\)\.\-\ ]/g, );
//strip out acceptable non-numeric characters
if (isNaN(parseInt(stripped))) {
   error = "The phone number contains illegal characters.";
}

然后我们计算一下这个数字的长度,它应该正好是10位—多了或者少了,我们都要拒绝它。

if (!(stripped.length == 10)) {
	error = "The phone number is the wrong length.
	  Make sure you included an area code.\n";
}

isDifferent()

     我们还希望多做一些检查。如果您在文本输入框中向用户提供一个许可证,看用户是否接受,则您会希望确认,在提交表单时,许可证的内容没有被改变。这可以通过简单地对用户提交的字符串和您期望的字符串进行比较来实现。

function isDifferent(strng) {
  var error = "";
  if (strng != "Can\t touch this!") {
     error = "You altered the inviolate text area.\n";
  }

还有一种方法,您可以使用 onChange() 方法来捕捉用户修改文本的动作,并在提交表单之前阻止他们。

checkRadio()

     为了确定用户是否对收音机按钮做出选择,我们可以遍历收音机按钮的数组,并对被选中的按钮进行记数。我们并没有把整个收音机按钮对象传递给子函数,这样可能会带来问题(因为收音机对象中并没有属性指出哪个值被选中),而是在一个 for 循环中对收音机表单元素进行预处理,然后把结果传递给一个子函数进行评价。

for (i=0, n=theForm.radios.length; i<n; i++) {
   if (theForm.radios[i].checked) {
      var checkvalue = theForm.radios[i].value;
      break;
   }
}
why += checkRadio(checkvalue);
 
function checkRadio(checkvalue) {
var error = "";
   if (!(checkvalue)) {
       error = "Please check a radio button.\n";
    }
return error;    
}

check Dropdown()

     最后,我们希望确认用户是否在我们提供的下拉式菜单中选择了一个选项(不是第一个选项,它根本不是一个选项,而只是一个“请选择一项”的说明)。为了实现这个目的,我们使用选择对象的 selectedIndex 属性,它返回被选择选项的索引。如果这个索引为0,我们就拒绝这个输入。

function checkDropdown(choice) {
    var error = "";
    if (choice == 0) {
       error = "You didnt choose an option
         from the drop-down list.\n";
    }    
return error;
}    

编码的挑战

     正当性检查基本上是考虑把一个事物和另一个事物进行比较,这是很容易的,特别是当使用 JavaScript 的时候。需要一点机智的部分是创建一个规则表达式。表达式越复杂,就越难于书写。然而通过一些实践和摸索之后,规则表达式的书写也可以成为一种习惯。

     在进行正当性检查时,也会有一些比我们在这里讨论的更加复杂的规则。比如,您可能希望检查一个信用卡号。有一个名为 Luhn modulus-10 方程的算法,可以检查给定信用卡号的正确性。碰到这种问题时,没有必要重新发明轮子了,可以从 brainjar.com 站点上抓取一个简单的脚本,或者从 JavaScript Source 上获得复杂一些的脚本。

使用这些脚本

     上述所有的函数都包含在一个名为 validate.js 文件中,可以用表单页面上部的 SCRIPT 标识的 SRC 属性来调用。或者如果您愿意的话,可以把这个文件的内容粘贴到您自己的 HTML 页面的顶部。如果你喜欢,可以通过 onBlur() 这个事件处理函数,在用户移向下一个元素时检查表单上的每一个元素,而不使用 onSubmit() 函数。和我们一贯的做法一样,请记住在后端也要检查重要的表单数据,因为绝大部分的客户端检查都可能被欺骗。

[1]  [2]