>웹 프론트엔드 >JS 튜토리얼 >jQuery 양식 유효성 검사의 비밀번호 확인 예에 대한 자세한 설명

jQuery 양식 유효성 검사의 비밀번호 확인 예에 대한 자세한 설명

小云云
小云云원래의
2018-01-11 13:50:393322검색

이 글은 주로 jQuery 양식 확인의 비밀번호 확인 구현 코드를 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

우리 모두 알고 있듯이 비밀번호를 변경할 때는 비밀번호를 두 번 입력해야 합니다. 두 비밀번호 상자에 내용이 모두 포함되어 있는지 확인하는 방법은 무엇입니까? 두 개의 비밀번호 상자가 일관성이 있습니까? 입력이 없으면 프롬프트가 표시됩니까? 좋습니다. 이 모든 것은 JS를 사용하여 구현할 수 있습니다. 구체적인 아이디어는 dom 노드를 얻고 객체의 값을 결정하는 이벤트를 작성하는 것입니다.
그럼 어떤 이벤트를 프로그램할까요? 온블러 이벤트여야죠~. 그리고 두 비밀번호 상자 모두에 초점을 잃는 흐림 이벤트를 추가하세요. jQuery를 사용하는 것이 더 편리합니다.
더 이상 고민하지 말고 곧바로 코드로 넘어가겠습니다.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>password验证</title>
    <script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
  </head>
  <body>
      <form ation="psot" method="">
      <label for="password1">请输入密码:</label>
      <input id="password" name="password" onblur="checkpas1();" required="true" type="password"/>
<br/>
      <label for="password1">请确认密码:</label>
      <input type="password" name="repassword" id="repassword" required="true" onChange="checkpas();" />
      <span class="tip" style="color: red;">两次输入的密码不一致</span><br>
      <input type="button" name="submit" value="提交" onclick="checkpas2();"/>
    </form>
    <script>
      $(".tip").hide();
      function checkpas1(){//当第一个密码框失去焦点时,触发checkpas1事件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2&&pas2!="")//此事件当两个密码不相等且第二个密码是空的时候会显示错误信息
          $(".tip").show();
        else
          $(".tip").hide();//若两次输入的密码相等且都不为空时,不显示错误信息。
        }
      function checkpas(){//当第一个密码框失去焦点时,触发checkpas2件
        var pas1=document.getElementById("password").value;
        var pas2=document.getElementById("repassword").value;//获取两个密码框的值
        if(pas1!=pas2){
          $(".tip").show();//当两个密码不相等时则显示错误信息
        }else{
          $(".tip").hide();
        }
        }
      function checkpas2(){//点击提交按钮时,触发checkpas2事件,会进行弹框提醒以防无视错误信息提交
        var pas3=document.getElementById("password").value;
        var pas4=document.getElementById("repassword").value;
        if(pas3!=pas4){
          alert("两次输入的密码不一致!");
          return false;
        }
      }
    </script>
  </body>
</html>
</html>

모두가 코드를 이해할 수 있기를 바랍니다. 실제로는 상대적으로 간단하며, 더 많이 작성하면 더 능숙해질 것입니다. 방금 시작했어요. 제가 틀렸습니다. 누군가 지적해 주셨으면 좋겠습니다

관련 권장 사항:

가장 일반적으로 사용되는 간단한 jQuery 양식 유효성 검사 방법

AngularJS 양식 유효성 검사 기능 구현 방법

AngularJS에서 포커스를 얻고 포커스를 잃음 구현 포커스 중 폼 유효성 검사 기능에 대한 자세한 설명

위 내용은 jQuery 양식 유효성 검사의 비밀번호 확인 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.