当前位置：首页 > 资讯 > 技术文档

javascript密码验证

时间：2020-08-14 05:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript密码验证

本文为大家分享了javascript密码验证的实现方法，欢迎大家阅读。 [img]http://files.jb51.net/file_images/article/201511/20151110143435818.png?20151010143443[/img] [img]http://files.jb51.net/file_images/article/201511/20151110143500322.gif?2015101014359[/img] [img]http://files.jb51.net/file_images/article/201511/20151110143519865.gif?20151010143526[/img] 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程序设计有所帮助。

全部评论(0)

上一篇：JS倒计时代码汇总
下一篇：JS实现网页每隔3秒弹出一次对话框的方法

资讯排行榜
更多>>