作为一名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.onsubmit="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)'>
如果你感觉我的方法还行的话,那我欢迎你使用,呵呵……
分享到:
相关推荐
主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行必填项不能为空验证,再进行正则表达式匹配验证。
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
html网页用户注册表单验证校验JavaScript源码代码,完整代码已经打包,还迎下载,代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
paypal-checkout, PayPal按钮和PayPal结帐的Javascript集成 PayPal 一组组件可以轻松集成PayPal按钮和贝宝签入到你的网站,由的XComponent服务。 HowTo Videos try it in our Demo App Learn more in our
高性能Web JavaScript Canvas 电子表格,高性能网页JavaScriptCanvas电子表格系统源码。功能包含:撤销 & 反撤销,格式刷,文本格式,字体设置,字体大小,字体加粗,斜体字,下划线,删除线,文字颜色,单元格颜色...
javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全
javascript特效 客户端验证javascript特效 客户端验证javascript特效 客户端验证
web前端JavaScript表单验证方法[汇编].pdf
里面有JS表单验证常用的一些方法和调用的实例,注释详细,适合快速开发表单型的网页
javascript一般表单的验证方法:包括用户名、密码、身份证、上传文件格式、邮件格式的验证。
基于JavaScript实现简单的表单验证,涉及HTML、css、JavaScript、正则表达式等相关内容
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
分别用jquery和javaScript实现的图片轮换。tab切换,图片上下滚动,表单验证。
JavaScript验证表单大全 JavaScript验证表单大全 JavaScript验证表单大全
基于jquery的form表单验证类,工程项目为.net项目,主要是做了详细的调用例子,如果不使用.net,可以直接formvaildator-1.0.js或formvaildator-1.0.min.js,里面也有详细的调用说明,不过项目说明因为有例子会直观...
JavaScript表单验证控制代码大全,包含各种数据输入类型、格式的验证
javascript 表单验证禁止输入中文汉字
Javascript表单验证大全,适用于学习网页