Detailed explanation of password confirmation example of jQuery form validation-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of password confirmation example of jQuery form validation

小云云

Jan 11, 2018 pm 01:50 PM

jquerypasswordconfirm

This article mainly introduces the implementation code of password confirmation of jQuery form verification in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

As we all know, when changing the password, you need to enter the password twice. How to ensure that both password boxes have content? Are the two password boxes consistent? Will a prompt be given if there is no input? OK, all of this can be implemented using JS. The specific idea is very simple. It is to write an event to obtain the dom node and determine the value of the object?
So what events should be written? It should be the onblur event~. And add blur events that lose focus to both password boxes. It's easier to use jQuery.
Without further ado, let’s go directly to the code:

<!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>

I hope everyone can understand the code. In fact, it is relatively simple. Just write more and you will get better. I just got started. What I said is wrong, I hope someone can point it out

Related recommendations:

The most commonly used simple jQuery form verification method

AngularJS form validation function implementation method

Detailed explanation of the form validation function implemented by AngularJS to gain focus and lose focus

The above is the detailed content of Detailed explanation of password confirmation example of jQuery form validation. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn