Home Web Front-end JS Tutorial Play with jQuery to realize the password strength prompt information function when registering as a member

Play with jQuery to realize the password strength prompt information function when registering as a member

Dec 29, 2017 am 10:56 AM
jquery password

This article mainly introduces jQuery to implement the password strength prompt information function when registering a member, involving jQuery event response and string traversal, operation and judgment and other related operating techniques. Friends in need can refer to it. I hope it can help everyone.

The example in this article describes how jQuery implements the password strength prompt information function when registering as a member. Share it with everyone for your reference, the details are as follows:

1. The effect is as shown in the picture:

##2.html code:


<p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>
<span id="password1_bg" class="bg_rt" style="display:none"></span>
</p>
<p class="mima_qd" id="password1_strength" style="display:none">
 <span class="mm_strength"><em>密码强度</em>
   <i class="password_qd">
    <span class="password_bg" id="strength_L"></span>
    <span class="password_bg" id="strength_M"></span>
    <span class="password_bg" id="strength_H"></span>
   </i>
  <em id="pw_check_info"></em>
</span>
</p>
<p class="tishi_wr" id="password1_info"></p>
Copy after login

3.jquery code:


//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW){
  if (sPW.length<=4)
    return 0; //密码太短
    var Modes=0;
  for (i=0;i<sPW.length;i++){
    //测试每一个字符的类别并统计一共有多少种模式.
    //charCodeAt():返回unicode编码的值
    Modes|=CharMode(sPW.charCodeAt(i)); //测试某个字符属于哪一类
  }
  return bitTotal(Modes);//计算出当前密码当中一共有多少种模式
}
//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN){
  if (iN>=48 && iN <=57) //数字
    return 1;
  if (iN>=65 && iN <=90) //大写字母
    return 2;
  if (iN>=97 && iN <=122) //小写
    return 4;
  else
    return 8; //特殊字符
}
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
  var modes=0;
  for (i=0;i<4;i++){
    if (num & 1) modes++;
    num>>>=1;
  }
  return modes;
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd){
  var O_color="#eeeeee";
  var L_color="#FF4040";
  var M_color="#FF9900";
  var H_color="#33CC00";
  var info = "";
  if (pwd==null||pwd==&#39;&#39;){
    Lcolor=Mcolor=Hcolor=O_color;
  } else {
    S_level=checkStrong(pwd);//检测密码的强度
    switch(S_level) {
       case 0:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = "弱";
         break;
       case 1:
         Lcolor=L_color;
         Mcolor=Hcolor=O_color;
         info = "弱";
         break;
       case 2:
         Lcolor=Mcolor=M_color;
         Hcolor=O_color;
         info = "中";
         break;
       default:
         Lcolor=Mcolor=Hcolor=H_color;
         info = "强";
       }
     }
   $("#strength_L").css("background", Lcolor);
   $("#strength_M").css("background", Mcolor);
   $("#strength_H").css("background", Hcolor);
   $("#pw_check_info").html(info);//密码强度提示信息
   return;
}
Copy after login

Related recommendations:

Detailed introduction to Bootstrap prompt information

How to write js pop-up prompt message to confirm deletion

Asp.Net alert pop-up prompt message summary of several methods

The above is the detailed content of Play with jQuery to realize the password strength prompt information function when registering as a member. 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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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

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

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.

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 set a password for excel How to set a password for excel Mar 21, 2024 am 09:00 AM

A few days ago, my cousin came to me to complain that he had worked hard to create a lot of data using Excel, but it was later modified by his colleagues. He didn't know the situation at the time. After sending it to his boss, he was scolded. This is really frustrating. Some people just don’t like you and want to deliberately punish you. After you leave school and enter society, you will find that more and more people are stabbing you in the back. In addition to a few words of comfort to my cousin, I also gave my cousin an advice. If you are afraid of encountering such a thing again in the future, then set a password for the excel form so that no one can open it except you. Netizens, if you are afraid that your Excel spreadsheet will be secretly modified by others, you should also set a password. How to set password for excel password form? Come with me to find out! 1.

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.

Detailed explanation of how to change Oracle default account password Detailed explanation of how to change Oracle default account password Mar 09, 2024 pm 04:21 PM

Detailed explanation of how to change Oracle default account password Oracle database is a commonly used relational database management system. It has powerful data management and processing capabilities and is widely used in enterprises and organizations. When using Oracle database, in order to ensure data security, we need to change the default account password in time. The following will introduce in detail how to change the Oracle default account password, including specific code examples. 1. Connect to the Oracle database first, use SQL*Plus tools or other

See all articles