Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript-Passwortüberprüfung_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:33:01
Original
1331 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die JavaScript-Passwortüberprüfung implementieren. Sie können ihn gerne lesen.

 

Der Javascript-Passwort-Bestätigungscode lautet wie folgt

<!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>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage