javascript

位置:IT落伍者 >> javascript >> 浏览文章

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


发布日期:2024年02月28日
 
网页表单的javascript集成验证方法举例
作为一名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][]))

{

if(eval(elems[i][]))

{

windowalert(elems[i][]);

focus();

return false;

}

}

我们建立多位数组就可实现循环遍历每个条目

elems =new Array(

new Arrary( )

);

for(i = ; i < elemslength; i++)

{

// 上面的验证语句

}

实战

使用如下例子编写验证脚本

<SCRIPT LANGUAGE=javascript type=text/javascript>

//

// Function: frmValid

//

// Author hongz

// Usage: YourFormonsubmit=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

valuelength< || valuesearch(/[^azAz_]/)>=

// validation condition

无效的用户名:只能输入位字母数字下划线的组合!)

// prompt on failure

new Array(

password

valuelength< || valuesearch(/[^azAz_]/)>=

无效的密码:只能输入位字母数字下划线的组合!)

new Array(

email

isMail(value)==false

Email是您在网上的重要联络工具请务必正确填写!)

);

// Validate here using eval statement

for(i = ; i < elemslength; i++)

{

with(eval(obj+elems[i][]))

{

if(eval(elems[i][]))

{

windowalert(elems[i][]);

focus();

return false;

}

}

}

return true;

}

//>

</SCRIPT>

为form添加onsubmit属性

<form onsubmit=return frmValid(this)>

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

上一篇:突破Javascript异常处理规则

下一篇:Java应用:编写高级JavaScript代码