Home Web Front-end JS Tutorial Detailed explanation of password confirmation example of jQuery form validation

Detailed explanation of password confirmation example of jQuery form validation

Jan 11, 2018 pm 01:50 PM
jquery password confirm

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>
Copy after login

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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to solve the problem that Windows 11 prompts you to enter the administrator username and password to continue? How to solve the problem that Windows 11 prompts you to enter the administrator username and password to continue? Apr 11, 2024 am 09:10 AM

When using Win11 system, sometimes you will encounter a prompt that requires you to enter the administrator username and password. This article will discuss how to deal with this situation. Method 1: 1. Click [Windows Logo], then press [Shift+Restart] to enter safe mode; or enter safe mode this way: click the Start menu and select Settings. Select "Update and Security"; select "Restart Now" in "Recovery"; after restarting and entering the options, select - Troubleshoot - Advanced Options - Startup Settings -&mdash

How to set router WiFi password using mobile phone (using mobile phone as tool) How to set router WiFi password using mobile phone (using mobile phone as tool) Apr 24, 2024 pm 06:04 PM

Wireless networks have become an indispensable part of people's lives in today's digital world. Protecting the security of personal wireless networks is particularly important, however. Setting a strong password is key to ensuring that your WiFi network cannot be hacked by others. To ensure your network security, this article will introduce in detail how to use your mobile phone to change the router WiFi password. 1. Open the router management page - Open the router management page in the mobile browser and enter the router's default IP address. 2. Enter the administrator username and password - To gain access, enter the correct administrator username and password in the login page. 3. Navigate to the wireless settings page - find and click to enter the wireless settings page, in the router management page. 4. Find the current Wi

Tutorial on changing wifi password on mobile phone (simple operation) Tutorial on changing wifi password on mobile phone (simple operation) Apr 26, 2024 pm 06:25 PM

Wireless networks have become an indispensable part of our lives with the rapid development of the Internet. In order to protect personal information and network security, it is very important to change your wifi password regularly, however. To help you better protect your home network security, this article will introduce you to a detailed tutorial on how to use your mobile phone to change your WiFi password. 1. Understand the importance of WiFi passwords. WiFi passwords are the first line of defense to protect personal information and network security. In the Internet age, understanding its importance can better understand why passwords need to be changed regularly. 2. Confirm that the phone is connected to wifi. First, make sure that the phone is connected to the wifi network whose password you want to change before changing the wifi password. 3. Open the phone’s settings menu and enter the phone’s settings menu.

Incorrect password, beware BitLocker warning Incorrect password, beware BitLocker warning Mar 26, 2024 am 09:41 AM

This article will explore how to solve the problem of wrong password, especially the need to be careful when dealing with BitLocker warnings. This warning is triggered when an incorrect password is entered multiple times in BitLocker to unlock the drive. Usually, this warning occurs because the system has a policy that limits incorrect login attempts (usually three login attempts are allowed). In this case, the user will receive an appropriate warning message. The complete warning message is as follows: The password entered is incorrect. Please note that continuously entering incorrect passwords will cause the account to be locked. This is to protect the security of your data. If you need to unlock your account, you will need to use a BitLocker recovery key. The password is incorrect, beware the BitLocker warning you receive when you log in to your computer

What should I do if my Win10 password does not meet the password policy requirements? What to do if my computer password does not meet the policy requirements? What should I do if my Win10 password does not meet the password policy requirements? What to do if my computer password does not meet the policy requirements? Jun 25, 2024 pm 04:59 PM

In the Windows 10 system, the password policy is a set of security rules to ensure that the passwords set by users meet certain strength and complexity requirements. If the system prompts that your password does not meet the password policy requirements, it usually means that your password does not meet the requirements set by Microsoft. standards for complexity, length, or character types, so how can this be avoided? Users can directly find the password policy under the local computer policy to perform operations. Let’s take a look below. Solutions that do not comply with password policy specifications: Change the password length: According to the password policy requirements, we can try to increase the length of the password, such as changing the original 6-digit password to 8-digit or longer. Add special characters: Password policies often require special characters such as @, #, $, etc. I

How to enter the system if you forget your win10 computer power-on password_What to do if you forget your win10 computer power-on password How to enter the system if you forget your win10 computer power-on password_What to do if you forget your win10 computer power-on password Mar 28, 2024 pm 02:35 PM

1. Download and install Xiaobai’s one-click system reinstallation tool on another computer, insert an empty USB disk to create a USB boot disk. For specific tutorials, please refer to: 2. Insert the USB boot disk into the computer that needs to change the password to restart, and press Start hotkey. Generally, the startup hotkey is one of F12, F8, F9, F10, and ESC. Then the startup interface appears, select the option of the USB disk and press Enter to enter. 3. Select [1] to start win10x64PE and press Enter to confirm. 4. Select the password modification tool on the desktop and double-click to open it. 5. Then a list of account names appears, select the account that needs to change the password and open it. 6. Click the Change Password command below, enter the new password twice, and then click OK to save the changes. 7. Finally, unplug the USB flash drive and restart the computer. Then it will be normal.

What is the name of the software that can unlock all wifi passwords (recommended mobile software to get connected wifi passwords with one click) What is the name of the software that can unlock all wifi passwords (recommended mobile software to get connected wifi passwords with one click) Apr 02, 2024 pm 06:46 PM

Wireless networks have become an integral part of people's lives in modern society. Or need to view saved passwords in WiFi list, sometimes we forget WiFi password, however. Mobile software came into being to solve this problem. To make it easy for you to master this magical tool, this article will introduce a software that can help you quickly unlock all WiFi passwords. 1. Powerful WiFi password unlocking tool - explore the wonderful world of WiFi password unlocking 2. Simple and easy-to-use interface design - convenient and fast operation methods 3. Supports multiple devices - meets the needs of different devices 4. Automatically Update - always keep the latest WiFi password 5. High-speed WiFi connection - easily cope with the simultaneous connection needs of multiple devices

Analysis of user password storage mechanism in Linux system Analysis of user password storage mechanism in Linux system Mar 20, 2024 pm 04:27 PM

Analysis of user password storage mechanism in Linux system In Linux system, the storage of user password is one of the very important security mechanisms. This article will analyze the storage mechanism of user passwords in Linux systems, including the encrypted storage of passwords, the password verification process, and how to securely manage user passwords. At the same time, specific code examples will be used to demonstrate the actual operation process of password storage. 1. Encrypted storage of passwords In Linux systems, user passwords are not stored in the system in plain text, but are encrypted and stored. L

See all articles