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

原创 2004年10月13日 12:55:00
    作为一名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(
                 '待验证条目名',
                 '验证条件',
                 '出错提示');
           那么验证代码将大大精简,我们只要如下使用循环就可实现上述冗长
       代码时下的功能,这里我们用witheval语句构造判断条件:
             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用户注册表单验证

function check(){if (document.form1.name.value == ""){alert("请填写您的用户名!");document.form1.name.focus()...
  • yangm1203
  • yangm1203
  • 2007年07月17日 17:18
  • 1302

利用js完成根据excel填充网页表单

这是我一个同学向我提的问题。为了方便,怎么让一个excel文件的数据填到表单里去。 由于是要填充到原网页,我们只能采用在浏览器控制台上利用js脚本动态添加的方法。 js读取excel的方法: v...
  • fxjwj1997518
  • fxjwj1997518
  • 2017年09月07日 14:18
  • 257

javascript 自动填写表单的实现方法

本文没有什么技术上创新,只要会一点Javascript的技术就可以写了。 第一步: 在页面查看源代码,把Form中包含的需要填列的HTML控件找出来如: 第二步:编...
  • fengyee_zju
  • fengyee_zju
  • 2013年12月15日 15:22
  • 2538

JavaScript验证表单数据,并提交给Java后台

jsp页面新建表单: 说明:action路径需要修改成你自己的 form  id="signForm" action="doSignIn">         input type=...
  • qq_22860303
  • qq_22860303
  • 2016年08月12日 11:30
  • 1010

【JavaScript】表单即时验证,不成功不让提交

不能再让表单在提交按钮之后才被验证了!你输入的任何信息表单都会即时反应! 这个JavaScript的关键是onCheck()事件,使用onKeyUp()事件完成是不行的,人家没有输入完毕,你就说人家不...
  • yongh701
  • yongh701
  • 2014年10月25日 20:29
  • 13238

利用JavaScript绕过表单限制及验证

http://blog.csdn.net/huaerbubai7/article/details/8074429 本教程主要介绍了如何利用javascript绕过一些简单的或者更高级一点的htm...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2013年10月29日 16:19
  • 2148

Javascript验证表单身份证号码的合法性

文章出处: http://dengo.org/archives/941 不少大的游戏注册时都要输入身份证号码,来限制未成年人,配合所谓的反沉迷系统,账号注册环节注重的是快捷,所以身份证验证都不是...
  • thinkscape
  • thinkscape
  • 2013年12月30日 16:50
  • 6910

网页打印表单js代码

--js代码: -------------------------------------------------------------------------------------------...
  • tommycsdn
  • tommycsdn
  • 2016年06月01日 20:00
  • 715

javascript完整表单验证

html> html lang="en"> head> meta http-equiv="content-type" content="text/html"; charset="UTF-8">...
  • pangqiandou
  • pangqiandou
  • 2016年09月23日 00:24
  • 1587

javascript实现较全功能注册表单

今天笔者仿照京东注册表单,进行设计了一个表单案例,在这个案例中,可以完成常见表单注册的绝大部分功能,比如表单注册信息的验证,校验用户名,校验密码强弱,注册信息的追踪。这其中用到了正则表达式,表单脚本的...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016年10月09日 09:03
  • 2325
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页表单的javascript集成验证方法举例
举报原因:
原因补充:

(最多只允许输入30个字)