javascript网站注册页面的客户端验证程序

/*
          * 网站注册页面验证,本人花了将近一天的时间弄好的,希望朋友们多多提意见,进一步优化这个表单验证,下面配有详细的注释
          * 我的QQ1659397593,欢迎朋友和我交流
          * 注意的问题: 引用计数js代码的路径 ,本程序有3个页面组成:表单页面 注册成功页面  js代码页面 和一个通过验证的小图片组成.图片自己下载吧,网上很多的

*/
效果如如下:

//网页代码:

http://www.w3.org/TR/html4/loose.dtd">

   
       
       
       
       
   
   
       

           

                新用户注册
           

           
               
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                       
                   
                   
                       
                   
               

用户名:
密码:
确认密码:
邮箱:
出生日期:
性别:	男女
兴趣:	Java HTML        Javascript
城市:	-请选择城市-                                 北京                                 广州                                 成都

           
       

   

//注册成功代码;

http://www.w3.org/TR/html4/loose.dtd">






 注册成功!

 

//js脚本代码:

window.Onload= function(){
     //通过ID或名字获取每个对象
  var usernameObj = document.getElementById("username");
  var passwordObj = document.getElementById("password");
  var cOnfirmObj= document.getElementById("confirm");
  var emailObj = document.getElementById("email");
  var birthdayObj = document.getElementById("birthday");
  var genderArr = document.getElementsByName("gender");
  var interestArr = document.getElementsByName("interest");
  var cityObj = document.getElementById("city");
  
  //设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法
  usernameObj.Onblur= checkUsername;
  passwordObj.Onblur= checkPassword;
  confirmObj.Onblur= checkConfirm;
  emailObj.Onblur= checkEmail;
  birthdayObj.Onblur= checkBirthday;
  genderArr.Onblur= checkGender;
  interestArr.Onblur= checkInterest;
  cityObj.Onblur= checkCity;
  
  //每个onblur事件的方法,8个方法
  function checkUsername(){
   var usernameValue = trim(usernameObj.value);
   var usernameRegex = /^[a-zA-Z_]\w{0,9}$/;
   var msg ="   ";
   if(usernameValue == null || usernameValue == "")
    msg ="用户名必须填写!";
   else if(!usernameRegex.test(usernameValue))
    msg ="用户名格式不正确";
   var span = document.getElementById("usernameSpan");
   span.innerHTML = msg;
   return msg == "   ";
  }
  
  function checkPassword(){
   var passwordValue = passwordObj.value;
   var passwordRegex = /^\w{6,10}$/;
   var msg ="   "; //不懂?
   if (!passwordValue)
    msg = "密码必须填写!";
   else
    if (!passwordRegex.test(passwordValue)) {
     msg = "密码必须6-16位";
     //alert(msg);
    }
   var span = document.getElementById("passwordSpan");
   span.innerHTML = msg;
   return msg == "   ";
  }
  
  
  function checkConfirm(){
   var cOnfirmValue= confirmObj.value;
   var passwordValue = passwordObj.value;
   var msg ="   ";
   if (!confirmValue)
    msg = "确认密码必须填写!";
   else if (confirmValue != passwordValue)
    msg = "密码必须一致!";
   
   var span = document.getElementById("confirmSpan");
   
   span.innerHTML = msg;
    return (msg == "   ");
   
   
  }
  
  function checkEmail(){
   var emailObjValue = emailObj.value;
   var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
   var msg ="   ";
   if(!emailObjValue)
      msg = "Email必须填写!";
   else if(!emailRegex.test(emailObjValue))
      msg = "Email格式不正确!";
   var span = document.getElementById("emailSpan");
   
   span.innerHTML = msg;
   return msg == "   ";
  }
  function checkBirthday(){
   var birthdayValue = birthdayObj.value;
   var birthdayRegex = /^([12]\d{3})-(([1-9])|(1[012])|(0[1-9]))-(([1-9])|([12]\d)|(3[01]))$/; 
   var msg ="   ";
   if(!birthdayValue)
      msg = "生日必须填写!";
   else if(!birthdayRegex.test(birthdayValue))
      msg = "出生日期格式不正确!";
   var span = document.getElementById("birthdaySpan");
   span.innerHTML = msg;
   return msg == "   ";
  }
  
  function checkGender(){
   //var genderValue = genderObj.value;
   var msg ="   ";
   if(genderArr[0].checked == genderArr[1].checked)
      msg = "性别必须选择!";
   var span = document.getElementById("genderSpan");
   span.innerHTML = msg;
   return msg == "   ";
  } 
  
  function checkInterest(){
   var msg ="   ";
   if(!(interestArr[0].checked || interestArr[1].checked || interestArr[2].checked))
        msg = "兴趣必须选择!";
   var span = document.getElementById("interestSpan");
   span.innerHTML = msg;
   return msg == "   ";
  } 
  
  function checkCity(){
   //var cityValue = cityObj.value;
   var msg ="   ";
   if(!cityObj.value)
       msg = "城市必须选择!";
   var span = document.getElementById("citySpan");
   span.innerHTML = msg;
   return msg == "   ";
  }
  
  //获取表单对象,并且为表单提交事件写个方法
  var form = document.getElementById("form");
  form.Onsubmit= function(){
   
   var bUsername = checkUsername();
   var bPassword = checkPassword();
   var bCOnfirm= checkConfirm();
   var bEmail = checkEmail();
   var bBirthday = checkBirthday();
   var bGender = checkGender();
   var bInterest = checkInterest();
   var bCity = checkCity();
   
      //如果,每个上面的每个对象,验证成功,则还回true
   return bUsername && bPassword && bConfirm && bEmail && bBirthday && bGender && bInterest && bCity;
  }
  
  //去除用户名前后的空格
  function trim(s){
   return s.replace(/^\s+|\s+$/g,"");
  }
 }