• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: | 推荐给好友 上一篇 | 下一篇

JavaScript验证整个表单

发布: 2008-8-07 14:52 | 作者: 网络转载 | 来源: ccid | 查看: 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 += "Please enter a numeric value 

for the number of brains field.\n"; 



if 

(!(exists(document.orderForm.typeField.value))) { 

fixThis += "Please enter the type.\n"; 



if 

(!(exists(document.orderForm.stateField.value))) { 

fixThis += "Please enter the state.\n"; 



if 

(!(isAPhoneNumber(document.orderForm.phoneNumber.value))) { 

fixThis += "Please 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 框,它根据用户输入的美国各州的编码计算销售所得税。 

延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/

TAG: JavaScript Javascript javascript 表单 验证


关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备10010545号-5
技术支持和业务联系:info@testage.com.cn 电话:010-51297073

软件测试 | 领测国际ISTQBISTQB官网TMMiTMMi认证国际软件测试工程师认证领测软件测试网