密码显示强弱

1 分别将div 包裹三个小的div

<div id="mainPwdStatus" class="padding-none register-form-input-psw-poor">    <div class="s1" id="strength_L" style="width: 26px; height: 22px;">弱</div>    <div class="s2" id="strength_M" style="width: 26px; height: 22px;">中</div>    <div class="s3" id="strength_H" style="width: 26px; height: 22px;">强</div></div>

2 调整css布局和样式（看自己的需求去调整）

.register-form-input-psw-poor {  border: solid 1px #C0C0C0;  float: right;  width: 78px;  height: 24px;  margin-top: -24px;  padding-top: 0px;  padding-left: 0px;   .s1 {     float: right;     margin-right: 50px;     margin-top: 0px;     text-align: center;     line-height: 25px;   }   .s2 {     float: right;     margin-top: -22px;     margin-right: 26px;     text-align: center;     line-height: 25px;  }   .s3 {    float: right;     margin-right: 0px;     margin-top: -22px;     text-align: center;     line-height: 25px;  }}

3js 验证密码规则

 //密码强度$("#newPassword").keyup(function () {    pwdSor(this.value);}); //失去光标事件 $("#newPassword").blur(function () {     pwdSor(this.value); }) function pwdSor(pwd) {     O_color = "#ffffff";     L_color = "#FF0000";     M_color = "#FF9900";     H_color = "#33CC00";     var level = 0, strength = "O";     var hasNum = 0;     var hasLower = 0;     var hasUper = 0;     var hasSymbol = 0;     if (pwd == null || pwd == ‘‘) {         strength = "O";         Lcolor = Mcolor = Hcolor = O_color;     } else {         var mode = 0;         if (pwd.length <= 5) {             mode = 0;         } else {             for (i = 0; i < pwd.length; i++) {                 var charCode;                 charCode = pwd.charCodeAt(i);                 // 判断输入密码的类型                 if (charCode >= 48 && charCode <= 57) //数字                     hasNum = 1;                 else if (charCode >= 65 && charCode <= 90) //大写                     hasUper = 1;                 else if (charCode >= 97 && charCode <= 122) //小写                     hasLower = 1;                 else                     hasSymbol = 1;             }             if (hasSymbol == 1 && hasUper == 1 && hasNum == 1 && hasLower == 1) {                 //强                 level = 8;             } else if (hasUper + hasLower == 2 && hasNum == 1) {                 level = 2;             } else if (hasUper + hasLower == 1 && hasLower + hasUper == 1 && hasNum == 1 && hasSymbol == 0 && pwd.length >= 6) {                 level = 1;             } else {                 level = 0;             }         }

}     switch (level) {         case 0:             strength = "O";             Lcolor = Mcolor = Hcolor = O_color;             break;         case 1:             strength = "L";             Lcolor = L_color;             Mcolor = Hcolor = O_color;             break;         case 2:             strength = "M";             Lcolor = Mcolor = M_color;             Hcolor = O_color;             break;         default:             strength = "H";             Lcolor = Mcolor = Hcolor = H_color;             break;     }     document.getElementById("strength_L").style.background = Lcolor;     document.getElementById("strength_M").style.background = Mcolor;     document.getElementById("strength_H").style.background = Hcolor;     return strength; }做的很lower，还是在别人指点下。上效果图

密码规则可以自己定义。希望大家工作愉快！

时间： 2024-11-09 19:15:34

密码显示强弱的相关文章

JS控制文本框中的密码显示/隐藏功能

<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <style> body,input{font:menu} </style> </head> <body> <form method="POST" action="addcheck.asp" name="forms&

密码显示隐藏切换

<div class="pwd-wrap"> <input type="password" id="pwd" value="123456"> <span id="btns"> <a>显示</a> <a class="cur">隐藏</a> </span> </div> $(func

密码显示

1.content_main.xml //输入框 <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/password&quo

Android：密码显示隐藏

效果: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android

1. 功能需求:HTML中,在input password输入框中输入字符将默认显示为“实体圆点”,但这里要求将实体圆点字符替换成“*”号显示. 2. 局限:鼠标光标非IE浏览器不一定显示,选择多个字符时未有视觉上的区分,功能没有影响:不支持中文输入. 3. 实现:通过两个input框实现,设置字符字体为等宽字体:其中真正的密码输入框设置为透明且遮盖住另一输入框,将非密码输入框的字符依密码字符串的多少显示“*”字符的个数. 附上测试文件如下: <!DOCTYPE html> <html

vue中密码显示隐藏切换

html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img src="../assets/colse_eyes.png" @click="

账号密码显示在listview中

加载文件啊加载文件 var txt:TextFile; s:string; str:TStringList; begin // str:=TStringList.Create; AssignFile(txt,'c:\456.txt'); Reset(txt); //读打开文件,文件指针移到首 while not Eof(txt) do begin Readln(txt,s); if s <>'' then str:=SplitString(s,'----'); with TestForm.li

设置登录注册页面输入密码时，监听密码显示隐藏；

代码里面:在oncreate()方法里面调用:还需要先定义一个全局变量:private boolean isHidden = true; private void setchck_password() { // 设置第一次输入密码未不可见状态 login_password.setTransformationMethod(PasswordTransformationMethod .getInstance()); // 设置CheckBox监听 check_password .setOnChecke

密码提示强弱的正则表达式

var = ["弱","中","强","超强"]; function checkStrong(val) { var modes = 0; if (val.length < 6) return 0; if (/\d/.test(val)) modes++; //数字 if (/[a-z]/.test(val)) modes++; //小写 if (/[A-Z]/.test(val)) modes++; //大写 if (/