首頁  >  文章  >  web前端  >  javascript密碼驗證_javascript技巧

javascript密碼驗證_javascript技巧

WBOY
WBOY原創
2016-05-16 15:33:011314瀏覽

本文為大家分享了javascript密碼驗證的實作方法,歡迎大家閱讀。

       

javascript密碼驗證程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>密码验证</title>
  <script src="js/jquery-1.11.1.js"></script>
  <script>
    $(function(){
      $(document).on('blur','input',function(){
        var $password=$('#password').val();
        var $password_again=$('#password_again').val();
          if(!$password){
            $("#password").addClass('redBorder').next('label').show().html('不能为空');;
            return false;
          }else if(!$password_again){
            $("#password_again").addClass('redBorder').next('label').show().html('不能为空');
            return false;
          }else{
            $('input').removeClass('redBorder').next('label').empty();
            if($password_again==$password){
              $("#password,#password_again").next('label').show().html('两次密码一致').addClass('valid');
            }else if($password_again!=$password){
              $("#password,#password_again").addClass('redBorder').next('label').show().html('两次密码不一致').removeClass('valid').addClass('erro');
            }
 
        } 
      })
       
    })
  </script>
  <style>
    .redBorder{
      border: 1px solid red;
    }
    .erro{
      background: url('images/unchecked.gif') no-repeat;
      padding-left: 16px;
    }
    .valid{
      background: url('images/checked.gif') no-repeat;
      width: 16px;
      height: 16px;
    }
  </style>
</head>
<body>
<div>
  <label>
    输入密码:<input type="text" placeholder="输入密码" id="password">
    <label id="password-erro" class="erro" style="display:none;"></label>
  </label>
  <br><br>
  <label>
    验证密码:<input type="text" placeholder="输入相同密码" id="password_again">
    <label id="password-erro" class="erro" style="display:none;"></label>
  </label>
  <br><br>
  <button style="margin-left:80px;">submit</button>
</div>  
</body>
</html>

希望本文對大家學習javascript程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn