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

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

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

이 글은 주로 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 양식 유효성 검사의 비밀번호 확인 예에 대한 자세한 설명

관련 기사