javascript学习实践－－新手上路－－验证表单

这几天学习javascript，就只在看书，都没怎么实践，
今天工作的时候要检验表单数据，属性Ｎ多，以前做的时候是对每个属性都写四五句话来判断，类似
function checkData(){
   if(document.forms[0].username==""){
      alert("请输入用户名");
      document.forms[0].username.focus();
      return false;
   }
   return true;
}
关于这种验证的实用性暂且不谈，现在一般的验证早已不用这个了。
只是为了在工作中偷偷懒，写了个方便点的CheckUtil，如下

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>验证</title>
<script type="text/javascript">
var CheckUtil = new Object();
var checkutil = CheckUtil;
CheckUtil.status = true;//状态，用来标志是否有不合格验证
CheckUtil.checks = new Array();//用来存储需要验证的对象参数
CheckUtil.definedchecks = new Array();//用来存储自定义验证
CheckUtil.errors = new Array();//用来存储输出错误信息
CheckUtil.firstErrObj = null;//用来存储第一个出错对象，设置焦点
//////////////////////各种验证类型/////////////////////////////
CheckUtil.REQUIRED = /\S/;        //非空
CheckUtil.INT = /^-?\d+$/;        //整数
CheckUtil.FLOAT = /^(-?\d+)(\.\d+)?$/;        //浮点数
CheckUtil.USERNAME = /^[a-zA-Z]{1}(\w){4,19}$/;        //用户名
CheckUtil.EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    //电子邮箱
CheckUtil.TEL = /^(($\d{3}$)(\d{3}\-))?($0\d{2,3}$0\d{2,3}-)?[1-9]\d{6,7}$/;    //电话号码
CheckUtil.MOBILEPHONE = /^(($\d{3}$)(\d{3}\-))?13\d{9}$/;        //手机
CheckUtil.NUM = /^\d+$/;    //数字
CheckUtil.CARDID = /^\d{15}(\d{2}[A-Za-z0-9])?$/;        //身份证号
CheckUtil.POSTCODE = /^[1-9]\d{5}$/;        //邮编
CheckUtil.DATE1 = /^(?:19\d{2}|20\d{2})-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01])$/        //日期，形如yyyy-mm-dd
///////////////////////////////////////////////////////////////////////
/**
*初始化
*/
CheckUtil.init = function(){
    CheckUtil.status = true;
    CheckUtil.checks = new Array();
    CheckUtil.definedchecks = new Array();
    CheckUtil.errors = new Array();
    CheckUtil.firstErrObj = null;
}
/**
*添加验证对象及参数
*@param obj 需验证表单对象
*@param checktype 需验证类型
*@param errmessage 验证失败时提示信息
*/
CheckUtil.addCheck = function(obj,checktype,errmessage){
    var check_obj = new checkObj(obj,checktype,errmessage);
    CheckUtil.checks.push(check_obj);
}
/**
*添加自定义验证
*@param expression 需验证表达式，为真时返回错误信息
*@param errmessage 验证失败时提示信息
*/
CheckUtil.addDefinedCheck = function(expression,errmessage){
    var check_obj = new definedcheckObj(expression,errmessage);
    CheckUtil.definedchecks.push(check_obj);
}
/**
*验证对象
*/
function checkObj(obj,checktype,errmessage){
    this.obj = obj;
    this.value = obj.value;
    this.checktype = checktype;
    this.errmessage = errmessage;
}
/**
*自定义验证对象
*/
function definedcheckObj(expression,errmessage){
    this.expression = expression;
    this.errmessage = errmessage;
}
/**
*执行验证并提示信息，并返回验证状态
*/
CheckUtil.execute = function(){    
    checkChecks();
    checkDefinedChecks();
    showError();
    return CheckUtil.status;
}
/**
*检验对象
*/
function checkChecks(){
     for(var i=0;i<checkutil.checks.length;i++){
          var check_obj = CheckUtil.checks[i];
          if(check_obj.checktype==CheckUtil.REQUIRED){//判断是否是必填
                 if(!check_obj.checktype.test(check_obj.value)){
                     CheckUtil.status = false;
                     if(!CheckUtil.firstErrObj){
                         CheckUtil.firstErrObj = check_obj.obj;
                     }
                     CheckUtil.errors.push(check_obj.errmessage);
                 }
          }else{//不是必填的话，看有没有填入值，填了就检查，没填也是可行的
               if(CheckUtil.REQUIRED.test(check_obj.value)){
                    if(!check_obj.checktype.test(check_obj.value)){
                          CheckUtil.status = false;
                          if(!CheckUtil.firstErrObj){
                              CheckUtil.firstErrObj = check_obj.obj;
                          }
                          CheckUtil.errors.push(check_obj.errmessage);
                    }
               }
         }
    }
}
/**
*检验自定义验证
*/
function checkDefinedChecks(){
    for(var i=0;i<checkutil.definedchecks.length;i++){
          var check_obj = CheckUtil.definedchecks[i];
          if(check_obj.expression){
                  CheckUtil.errors.push(check_obj.errmessage);
          }
    }
}
/**
*显示错误信息
*/
function showError(){
    if(!CheckUtil.status){
        var show = "";
        for(var i=0;i<checkutil.errors.length;i++){
            show +=(i+1)+". "+CheckUtil.errors[i]+"\n";
        }
        alert(show);    
        CheckUtil.firstErrObj.focus();
        CheckUtil.firstErrObj.select();
    }
}
function checkData(){
    CheckUtil.init();
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.REQUIRED,"请输入用户名");
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.USERNAME,"用户名须由字母开头,及4-19位单词字符组成");
    CheckUtil.addCheck(document.forms[0].password,CheckUtil.REQUIRED,"请输入密码");
    CheckUtil.addCheck(document.forms[0].checkcode,CheckUtil.NUM,"验证码须为数字");
    CheckUtil.addCheck(document.forms[0].logindate,CheckUtil.DATE1,"请输入正确的日期格式，形如yyyy-mm-dd");
    CheckUtil.addDefinedCheck(document.forms[0].password!=document.forms[0].password2,"两次输入的密码不相同");
    return CheckUtil.execute();
}
</script>
</head>
<body>
<form name="form1" action="www.blogjava.net/ilovezmh" method="post" onsubmit="return checkData();">
<label>用户名</label>
<input name="username" type="text" size="20" /><br/>
<label>密　码</label>
<input name="password" type="password" size="20" /><br/>
<label>确　认</label>
<input name="password2" type="password" size="20" /><br/>
<label>验证码</label>
<input name="checkcode" type="text" size="20" /><br/>
<label>日　期</label>
<input name="logindate" type="text" size="20" /><br/>
<button name="sub" type="submit"> 提　交　</button>
</form>
</body>
</html>

其实也可以方便的根据需要更改提示的方式。

posted on 2007-04-18 23:36 小祝阅读(713) 评论(2) 编辑收藏所属分类: Javascript

常用链接

留言簿(5)

随笔分类

随笔档案

好友的BLOG

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 用ActiveXObject控件替换word书签，将内容导出到word后打印 xml+xsl+javascript取值及修改数据 javascript学习笔记(八)－－错误处理 javascript学习笔记(七)－－DOM基础 javascript学习实践－－新手上路－－验证表单 javascript学习笔记(六)－－资料 javascript学习笔记(五)－－事件 javascript学习笔记(四)－－检测浏览器和操作系统 javascript学习笔记(三)－－正则表达式 javascript学习笔记(二)－－继承