职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 2855|回复: 0

JavaScript验证整个表单

[复制链接]
帕帕 发表于 2007-8-15 10:51 | 显示全部楼层 |阅读模式
不像域级有效性检查(field-level validation),表单级有效性检查(form-level validation)将整个表单上的某组(或全部)值作为一个整体分析其一致性。表单级有效性检查一般发生在将一个已完成的HTML 表单提交给CGI 程序之前。我们这样做是为了确保用户在将数据发送至服务器之前,已经填写了所有的必填域。
验证整个表单其实相当简单。在我们的例子当中,我们已经去除了大部份会自动弹出即时警告信息的域级有效性检查。下面是一个例子:
function isANumber(number) {
answer = 1;
if (!parseFloat(number)) {
//the first digit wasn't numeric
answer = 0;
} else {
//the first digit was numeric, so check the rest

for (vari=0; i if ((number.charAt(i) != \"0\")
&& (!parseFloat(number.charAt(i)))) {
answer = 0;
break;
}
}
}
if (answer == 1) {
orderPlaced = true;
}
return answer;
}
上面的代码,基本上是我们前面的数字检查函数,只不过没有JavaScript 警告信息。在这个情况中,如果用户输入了数字以外的字符,我们不会自动发送错误信息。
一旦用户认为她已经完成了整个表单,那么她就可以按下 Submit(提交)按钮。在那个时候,我们就检查每个域是否有遗漏,或是存有格式不正确的数据。
function validateForm() {
varfixThis = \"\";
if
(!(isANumber(document.orderForm.numberOrdered.value))) {
fixThis += \"lease enter a numeric value
for the number of brains field.\\n\";
}
if
(!(exists(document.orderForm.typeField.value))) {
fixThis += \"lease enter the type.\\n\";
}
if
(!(exists(document.orderForm.stateField.value))) {
fixThis += \"lease enter the state.\\n\";
}
if
(!(isAPhoneNumber(document.orderForm.phoneNumber.value))) {
fixThis += \"lease enter the phone number
in the following format: (123)456-7890\";
}
if
(fixThis != \"\") {
alert(fixThis);
} else {
document.location.href = \"thanks.html\";
}
}
这个函数检查表单中所有的域,以确保每个域都包含有效的值。倘若它发现某个域缺少有效的数据,它就会在fixThis变量添加一个新的警告信息,然后再继续下去。在最后,它要么弹出一个含有各种警告信息的窗口,就是传送一个简短的“Thank You”给用户。
注意:这个例子检查了表单中我们没有提到的一部分——State 框,它根据用户输入的美国各州的编码计算销售所得税。
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-5-17 19:23 , Processed in 0.123931 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表