经典的登录表单验证

baiyejianxin

经典的登录表单验证
登录表单
$(function(){
  $("#username").addClass("font_color1");//添加样式
  $("#password").addClass("font_color1");//添加样式
  
  $("#username").focus(function(){     //获取焦点
      if($(this).val()==this.defaultValue){
      $(this).removeClass("font_color1");
         $(this).val("");
   }
  });
  $("#username").blur(function(){     //丢失焦点
      if($(this).val()==""){
      $(this).addClass("font_color1");
      $(this).val(this.defaultValue);
   
   }
   button_canUserd();
  });
  
   $("#username").keyup(function(){   //按键抬起
      button_canUserd();
   });
  
  $("#password").focus(function(){    //获取焦点
      if($(this).val()==this.defaultValue){
      $(this).removeClass("font_color1");
         $(this).val("");
   }
  });
  $("#password").blur(function(){    //失去焦点
      if($(this).val()==""){
      $(this).addClass("font_color1");
      $(this).val(this.defaultValue);
   
   }
   button_canUserd();
  });
  
  $("#password").keyup(function(){   //按键抬起
     button_canUserd();
  });
  
  function button_canUserd(){
    if($("#username").val()!="" && $("#username").val()!="请输入账号" && $("#password").val()!="" && $("#password").val()!="请输入密码"){
       $("#login_ok").attr("disabled",""); //按钮可用
    }else{
    $("#login_ok").attr("disabled","disabled"); //按钮可用
}  
  
  }
  
})
  .login{ width:320px; height:70px; background-color:#fff4fa; border:2px solid #f8b4cd; font-size:12px; padding-top:10px; text-align:center}
  .login_r{ width:320px; height:20px;}
  .login_d_1{ width:100px; height:20px; float:left}
  .login_d_2{ width:70px; height:20px; float:left}
  #username{ width:100px;}
  #password{ width:100px;}
  .font_color1{ color:#999999}
  .font_color2{ color:#000000}
  

   
       用户名：
   
    留在首页
    进入邮箱
   
   
       密  码：
   
   
    记住状态
     

   


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/93876/showart_2038375.html