html密码的正则验证,JS基于正则表达式实现的密码强度验证功能示例

本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

www.ddpool.cn

body {

background: #ccc;

}

label {

width: 40px;

display: inline-block;

}

span {

color: red;

}

.container {

margin: 100px auto;

width: 400px;

padding: 50px;

line-height: 40px;

border: 1px solid #999;

background: #efefef;

}

span {

margin-left: 30px;

font-size: 12px;

}

.wrong {

color: red

}

.right {

color: green;

}

.strengthLv0 {

height: 6px;

width: 120px;

border: 1px solid #ccc;

padding: 2px;

}

.strengthLv1 {

background: red;

height: 6px;

width: 40px;

border: 1px solid #ccc;

padding: 2px;

}

.strengthLv2 {

background: orange;

height: 6px;

width: 80px;

border: 1px solid #ccc;

padding: 2px;

}

.strengthLv3 {

background: green;

height: 6px;

width: 120px;

border: 1px solid #ccc;

padding: 2px;

}

密码

密码强度：

var regEx = /^[1-9]\d{4,9}$/; //匹配qq号

//找人

var inp1 = document.getElementById("inp1");

var strength = document.getElementById("strength");

var strengthLevel = document.getElementById("strengthLevel");

var arr = ["", "低", "中", "高"];

inp1.onkeyup = function () {

var level = 0;

if (/[1-9]/.test(this.value)) {

level++;

}

if (/[a-z]/.test(this.value)) {

level++;

}

if (/[^a-z1-9]/.test(this.value)) {

level++

}

if (this.value.length < 6) {

level = 0;

}

strength.innerHTML = arr[level];

strengthLevel.className = "strengthLv" + level;

};

/* inp1.onkeyup = function () {

var level = 0;

if (/[1-9]/.test(this.value)) {

level++;

}

if (/[a-z]/.test(this.value)) {

level++

}

if (/[^a-z0-9]/.test(this.value)) {

level++

}

if (inp1.value.length < 6) {

level = 0;

}

strengthLevel.className = "strengthLv"+level;

strength.innerHTML = arr[level];

};*/

PS：这里再为大家提供几款相关在线工具供大家参考使用：

密码安全性在线检测：http://tools.ddpool.cn/password/my_password_safe

在线随机数字/字符串生成工具：http://tools.ddpool.cn/aideddesign/suijishu

高强度密码生成器：http://tools.ddpool.cn/password/CreateStrongPassword

JavaScript正则表达式在线测试工具：http://tools.ddpool.cn/regex/javascript

正则表达式在线生成工具：http://tools.ddpool.cn/regex/create_reg

希望本文所述对大家JavaScript程序设计有所帮助。