| 网站首页 | | 网站简介 | | 公司新闻 | | 公司业务 | | 技术相关 | | 安全相关 | | 网络文章 | | 网站论坛 | | 典型案例 | | 客户留言 |  
 首页 >> 技术相关 >> JAVA技术

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


[日期:2005-12-11 11:14:07] [作者: 管理员] [字体大小:

作者:未知 文章来源: 点击数: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)'>

    [阅读次数:129]
 [新闻出处:]
 上一条新闻: 通用表单验证函数-改进版
 下一条新闻: 几种常用的表单输入判断
相关新闻:
站 内 搜 索
请输入查询的字符串:

 
点 击 排 行
页 面 广 告
 
关于我们 | 联系方式 | 支付方式 | 站点统计
版权所有 DoILike.Com Ltd.,地址:山东省济南市舜耕路22号综合楼101室
电 话:13065088567 联系人:许老师 设计制作:DoILike.COM