javascript密码验证

前端技术 2023/09/06 JavaScript

本文为大家分享了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17489

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案