Jquery 实现表单验证，所有验证通过方可提交

最新推荐文章于 2024-03-14 07:00:00 发布

文斌a

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量3.2k

点赞数

  1 

  2 

  3 

  4 

  5 

  6 

  7 

  8 

  9 

  10 

  11 

  12 

  13 

  14 

  15 

  16 

  17 

  18 

  19 

  20 

  21 

  22 

  23 

  24 

  25 

  26 

  27 

  28 

  29 

  30 

  31 

  32 

  33 

  34 

  35 

  36 

  37 

  38 

  39 

  40 

  41 

  42 

  43 

  44 

  45 

  46 

  47 

  48 

  49 

  50 

  51 

  52 

  53 

  54 

  55 

  56 

  57 

  58 

  59 

  60 

  61 

  62 

  63 

  64 

  65 

  66 

  67 

  68 

  69 

  70 

  71 

  72 

  73 

  74 

  75 

  76 

  77 

  78 

  79 

  80 

  81 

  82 

  83 

  84 

  85 

  86 

  87 

  88 

  89 

  90 

  91 

  92 

  93 

  94 

  95 

  96 

  97 

  98 

  99 

  100 

  101 

  102 

  103 

  104 

  105 
 
  <html> 
 
  <head> 
 
  <meta http-equiv= 
  "content-type" 
  content= 
  "text/html; charset=utf-8" 
  > 
 
  <title>Reg</title> 
 
  <style> 
 
  .state1{ 
 
  color:#aaa; 
 
  } 
 
  .state2{ 
 
  color:#000; 
 
  } 
 
  .state3{ 
 
  color:red; 
 
  } 
 
  .state4{ 
 
  color:green; 
 
  } 
 
  </style> 
 
  <script src= 
  "jquery.js" 
  ></script> 
 
  <script> 
 
  $( 
  function 
  (){ 
 
  var 
  ok1=false; 
 
  var 
  ok2=false; 
 
  var 
  ok3=false; 
 
  var 
  ok4=false; 
 
  // 验证用户名 
 
  $( 
  'input[name="username"]' 
  ).focus( 
  function 
  (){ 
 
  $(this).next().text( 
  '用户名应该为3-20位之间' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state2' 
  ); 
 
  }).blur( 
  function 
  (){ 
 
  if 
  ($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!= 
  '' 
  ){ 
 
  $(this).next().text( 
  '输入成功' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state4' 
  ); 
 
  ok1=true; 
 
  } 
  else 
  { 
 
  $(this).next().text( 
  '用户名应该为3-20位之间' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state3' 
  ); 
 
  } 
 
  }); 
 
  //验证密码 
 
  $( 
  'input[name="password"]' 
  ).focus( 
  function 
  (){ 
 
  $(this).next().text( 
  '密码应该为6-20位之间' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state2' 
  ); 
 
  }).blur( 
  function 
  (){ 
 
  if 
  ($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!= 
  '' 
  ){ 
 
  $(this).next().text( 
  '输入成功' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state4' 
  ); 
 
  ok2=true; 
 
  } 
  else 
  { 
 
  $(this).next().text( 
  '密码应该为6-20位之间' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state3' 
  ); 
 
  } 
 
  }); 
 
  //验证确认密码 
 
  $( 
  'input[name="repass"]' 
  ).focus( 
  function 
  (){ 
 
  $(this).next().text( 
  '输入的确认密码要和上面的密码一致,规则也要相同' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state2' 
  ); 
 
  }).blur( 
  function 
  (){ 
 
  if 
  ($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!= 
  '' 
  && $(this).val() == $( 
  'input[name="password"]' 
  ).val()){ 
 
  $(this).next().text( 
  '输入成功' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state4' 
  ); 
 
  ok3=true; 
 
  } 
  else 
  { 
 
  $(this).next().text( 
  '输入的确认密码要和上面的密码一致,规则也要相同' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state3' 
  ); 
 
  } 
 
  }); 
 
  //验证邮箱 
 
  $( 
  'input[name="email"]' 
  ).focus( 
  function 
  (){ 
 
  $(this).next().text( 
  '请输入正确的EMAIL格式' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state2' 
  ); 
 
  }).blur( 
  function 
  (){ 
 
  if 
  ($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){ 
 
  $(this).next().text( 
  '请输入正确的EMAIL格式' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state3' 
  ); 
 
  } 
  else 
  {                   
 
  $(this).next().text( 
  '输入成功' 
  ).removeClass( 
  'state1' 
  ).addClass( 
  'state4' 
  ); 
 
  ok4=true; 
 
  } 
 
  }); 
 
  //提交按钮,所有验证通过方可提交 
 
  $( 
  '.submit' 
  ).click( 
  function 
  (){ 
 
  if 
  (ok1 && ok2 && ok3 && ok4){ 
 
  $( 
  'form' 
  ).submit(); 
 
  } 
  else 
  { 
 
  return 
  false; 
 
  } 
 
  }); 
 
  }); 
 
  </script> 
 
  </head> 
 
  <body> 
 
  <form action= 
  'do.php' 
  method= 
  'post' 
   > 
 
  用 户 名:<input type= 
  "text" 
  name= 
  "username" 
  > 
 
  <span  
  class 
  = 
  'state1' 
  >请输入用户名</span><br/><br/> 
 
  密　　码:<input type= 
  "password" 
  name= 
  "password" 
  > 
 
  <span  
  class 
  = 
  'state1' 
  >请输入密码</span><br/><br/> 
 
  确认密码:<input type= 
  "password" 
  name= 
  "repass" 
  > 
 
  <span  
  class 
  = 
  'state1' 
  >请输入确认密码</span><br/><br/> 
 
  邮　　箱:<input type= 
  "text" 
  name= 
  "email" 
  > 
 
  <span  
  class 
  = 
  'state1' 
  >请输入邮箱</span><br/><br/>    
 
  <a href= 
  "javascript:;" 
  ><img  
  class 
  = 
  'submit' 
  type= 
  'image' 
   src= 
  './images/reg.gif' 
   /></a> 
 
  </form> 
 
  </body>