作者:未知 文章来源: 点击数:22 更新时间:2005-9-4
作为一名Web设计人员、一名Coder,你是否已经厌倦了网页设计中的表单验证问题?不厌其烦的拷贝 if(x) { alert('wrong');} ,还是使用一个难以尽和我意的IDE ?好吧,让我来告诉你一种比较lazy的写法,你也许就不会对表单验证那么头大了…… 原理: 表单验证无非是要对要收集每一条信息进行验证,也就是要写一个名为frmValid的javascript函数,在其中执行如下操作: ... if (待验证条目 不符合条件) { alert('出错了!'); 待验证条目.focus(); return false; } ... // all right return true; 当然,<form ... onsubmit='return frmValid()'>必须包含在HTML代码中。想想看,待验证条目越多代码越长,也就越容易出错。 下面我们把验证条目放到一个数组里,如下: elemArray = new Array( '待验证条目名', '验证条件', '出错提示'); 那么验证代码将大大精简,我们只要如下使用循环就可实现上述冗长代码时下的功能,这里我们用with和eval语句构造判断条件: with(eval('obj.'+elems[i][0])) { if(eval(elems[i][1])) { window.alert(elems[i][2]); focus(); return false; } } 我们建立多位数组就可实现循环遍历每个条目: elems = new Array( new Arrary( ...), ... ); for(i = 0; i < elems.length; i++) { // 上面的验证语句 }
实战: 1、使用如下例子编写验证脚本: <SCRIPT LANGUAGE="javascript" type="text/javascript"> // // Function: frmValid // ------------------ // Author hongz // Usage: YourForm.onsbumit="return frmValid(this)". // Purpose: To validate form elements in an integrated way. // function frmValid(obj) { // Elements array, initialization for validation elems = new Array( new Array( 'username', // name of elements to be validated 'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0', // validation condition '无效的用户名:只能输入6-20位字母、数字、下划线的组合!'), // prompt on failure new Array( 'password', 'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0', '无效的密码:只能输入6-20位字母、数字、下划线的组合!'), new Array( 'email', 'isMail(value)==false', 'Email是您在网上的重要联络工具,请务必正确填写!') );
// Validate here, using eval statement. for(i = 0; i < elems.length; i++) { with(eval('obj.'+elems[i][0])) { if(eval(elems[i][1])) { window.alert(elems[i][2]); focus(); return false; } } } return true; } //--> </SCRIPT> 2、为form添加onsubmit属性: <form ... onsubmit='return frmValid(this)'>
|