站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题网页表单的javascript集成验证方法举例

网页表单的javascript集成验证方法举例

摘要: 网页表单的javascript集成验证方法举例
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible"> 作为一名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)'>

如果你感觉我的方法还行的话,那我欢迎你使用,呵呵……

</textarea>
↑返回目录
前一篇: javascript计算器
后一篇: 40种网页常用小技巧(javascript)