js测试密码强度
JS正则表达式验证密码强度
JS正则表达式验证密码强度本⽂实例为⼤家分享了JS正则表达式验证密码强度的具体代码，供⼤家参考，具体内容如下代码1：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style type="text/css">#dv{width: 300px;height:200px;position: absolute;left:300px;top:100px;}.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;}</style><body><div id="dv"><label for="pwd">密码</label><input type="text" id="pwd" maxlength="16"><!--课外话题--><div><em>密码强度：</em><em id="strength"></em><div id="strengthLevel" class="strengthLv0"></div></div></div><script src="common.js"></script><script>/*** 密码: 数字,字母,特殊符号** 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱* 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中* 三者都有: 数字和字母和特殊符号------3级-----强** *///获取⽂本框注册键盘抬起事件my$("pwd").onkeyup=function () {//每次键盘抬起都要获取⽂本框中的内容,验证⽂本框中有什么东西,得到⼀个级别,然后下⾯的div显⽰对应的颜⾊ //如果密码的长度是⼩于6的,没有必要判断if(this.value.length>=6){var lvl=getLvl(this.value);if(lvl==1){//弱my$("strengthLevel").className="strengthLv1";}else if(lvl==2){my$("strengthLevel").className="strengthLv2";}else if(lvl==3){my$("strengthLevel").className="strengthLv3";}else{my$("strengthLevel").className="strengthLv0";}}else{my$("strengthLevel").className="strengthLv0";}};//给我密码,我返回对应的级别function getLvl(pwd) {var lvl=0;//默认是0级//密码中是否有数字,或者是字母,或者是特殊符号if(/[0-9]/.test(pwd)){lvl++;}//判断密码中有没有字母if(/[a-zA-Z]/.test(pwd)){lvl++;}//判断密码中有没有特殊符号if(/[^0-9a-zA-Z_]/.test(pwd)){lvl++;}return lvl;//1 3}</script></body></html>优化代码2：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style type="text/css">#dv{width: 300px;height:200px;position: absolute;left:300px;top:100px;}.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;}</style><body><div id="dv"><label for="pwd">密码</label><input type="text" id="pwd" maxlength="16"><!--课外话题--><div><em>密码强度：</em><em id="strength"></em><div id="strengthLevel" class="strengthLv0"></div></div></div><script src="common.js"></script><script>//获取⽂本框注册键盘抬起事件my$("pwd").onkeyup=function () {//每次键盘抬起都要获取⽂本框中的内容,验证⽂本框中有什么东西,得到⼀个级别,然后下⾯的div显⽰对应的颜⾊ //如果密码的长度是⼩于6的,没有必要判断// if(this.value.length>=6){// var lvl= getLvl(this.value);// my$("strengthLevel").className="strengthLv"+lvl;// }else{// my$("strengthLevel").className="strengthLv0";// }my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0);};//给我密码,我返回对应的级别function getLvl(pwd) {var lvl=0;//默认是0级//密码中是否有数字,或者是字母,或者是特殊符号if(/[0-9]/.test(pwd)){lvl++;}//判断密码中有没有字母if(/[a-zA-Z]/.test(pwd)){lvl++;}//判断密码中有没有特殊符号if(/[^0-9a-zA-Z_]/.test(pwd)){lvl++;}return lvl;//最⼩的值是1,最⼤值是3}</script></body></html>common.js/*** 获取指定标签对象* @param id 标签的id属性值* @returns {Element}根据id属性值返回指定标签对象*/function my$(id) {return document.getElementById(id);以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
基于JavaScript的密码强度检测
基于ＪａｖａＳｃｒｉｐｔ的密码强度检测作者：宁辉华来源：《硅谷》2008年第13期[摘要]在网络的使用过程中，为了保证数据及个人信息的安全，经常需要设计密码，但太普通的密码很容易被破解，一个不安全的密码有可能会给我们造成不必要的损失。
作为网站设计者，如果我们在网页中能对用户输入的密码进行安全评估，并显示出相应的提示信息，那么对用户设置一个安全的密码将有很大帮助，同时也使得网站更具人性化，更有吸引力。
[关键词]JavaScript 密码强度密码安全中图分类号：TP3 文献标识码：A 文章编号：1671－7597(2008)0710046－01一、密码的重要性密码经常用于保护个人的私密档案、确定用户的身份等。
在网络上尤其使用频繁，无论是注册成为会员还是注册一个邮箱或者申请一个QQ号码都需要设定一个密码。
但是一个太简单的密码很容易被破解，从而造成个人信息的泄密、会员不能登录、邮箱无法打开等困扰。
普通用户又不知道自己的密码到底是不是安全，比如有些用户经常使用自己的生日、电话、身份证等作为密码，这种纯数字作为密码是最被破解的一种密码，非常的不安全，因为根据排列与组合的规律一个破解程序在理论上来说可能只需要几秒钟就能检测到密码。
有些用户只知道多设置密码的位数就行了（都用数字或者都用字母），但这样并不一定安全。
最好的办法是数字、字母、特殊符号相结合，并且密码位数在十位以上。
这样即使人家使用破解程序也很难破解了，需要的时间可能是纯数字或者纯字母的几十倍甚至几百倍，那么破译者没有这个耐心等待就放弃了。
二、密码安全什么是一个安全的密码呢?本程序按以下的方式进行检测：1．如果密码少于5位，那么就肯定认为这是一个弱密码，安全性不高很容易被破解。
2．如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成，则也认为这是一个弱密码，比较容易被破解。
3．如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成，则认为这是一个中度安全的密码，相对来说难以破解，或者说破解需要很长时间。
javascript密码强度校验代码（两种方法）
javascript密码强度校验代码（两种⽅法）先看效果图：javascript密码强度校验代码，具体实现思路不多说了，请看下⾯代码和demo。
第⼀种⽅法：/**密码安全程度*return ：全部为字母或者数字,或者密码长度⼩于*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符*return : 字母和数字和特殊字符*/String.prototype.passwordStrength=function(){if(this.length> && this.length<=) return ;var n = (this.search(/[a-zA-Z]/) != -) ? : ,n = (this.search(/[-]/) != -) ? : ,n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ;return n+n+n;}demo<!doctype html><html><head><meta charset="utf-"><title>js密码强度</title><style type="text/css">.pw_letter{ margin-top:px; font-size: px; }.pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;}.pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;} .pw_letter span.pw_strength_color{ background-color:green;}</style></head><body><input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())"><div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </div> <script type="text/javascript">/**密码安全程度*return ：全部为字母或者数字,或者密码长度⼩于*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符*return : 字母和数字和特殊字符*/String.prototype.passwordStrength=function(){if(this.length> && this.length<=) return ;var n = (this.search(/[a-zA-Z]/) != -) ? : ,n = (this.search(/[-]/) != -) ? : ,n =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{,}/) != -) ? : ;return n+n+n;}String.prototype.trim = String.prototype.trim || function(){return this.replace(/^\s+|\s+$/g,"");}function setPasswordStrength(pwd){var strength_span = document.getElementsByClassName("strength");for(var i=; i<strength_span.length; i++){strength_span.item(i).className="strength";}for(var i=; i<pwd.passwordStrength(); i++){document.getElementsByClassName("strength").item(i).className="strength pw_strength_color";}}</script></body>第⼆种⽅法：javascript代码如下：<script>function AuthPasswd(string) {if(string.length >=6) {if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {noticeAssign(1);}else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {noticeAssign(-1);}else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {noticeAssign(-1);}else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {noticeAssign(-1);}else{noticeAssign(0);}}}else{noticeAssign(null);}}function noticeAssign(num) {if(num == 1) {$('#weak').css({backgroundColor:'#009900'});$('#middle').css({backgroundColor:'#009900'});$('#strength').css({backgroundColor:'#009900'});$('#strength').html('很强');$('#middle').html('');$('#weak').html('');}else if(num == -1){$('#weak').css({backgroundColor:'#ffcc33'});$('#middle').css({backgroundColor:'#ffcc33'});$('#strength').css({backgroundColor:''});$('#weak').html('');$('#middle').html('中');$('#strength').html('');}else if(num ==0) {$('#weak').css({backgroundColor:'#dd0000'});$('#middle').css({backgroundColor:''});$('#strength').css({backgroundColor:''});$('#weak').html('弱');$('#middle').html('');$('#strength').html('');}else{$('#weak').html(' ');$('#middle').html(' ');$('#strength').html(' ');$('#weak').css({backgroundColor:''});$('#middle').css({backgroundColor:''});$('#strength').css({backgroundColor:''});}}</script>以上通过两种⽅法介绍了javascript密码强度校验代码，希望对⼤家有所帮助。
vue.js+ElementUI实现进度条提示密码强度效果
vue.js+ElementUI实现进度条提⽰密码强度效果要求⼀：判断输⼊的字符串是否包含数字、⼩写字母、⼤写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使⽤?=这个正则语法判断字符串中是否含有多种内容。
(?=)这个语法结构在正则⾥表⽰“设定后⾯是”的意思，举下⾯⼏个例⼦进⼀步了解?=这个语法：(?=.*[a-zA-Z]) 这句的意思就是后⾯必须有⼀位⼤写或⼩写字母(?=.*[1-9]) 这句的意思是后⾯必须有⼀位数字(?=.*[\W]) 这句的意思是后⾯必须有⼀个⾮字母数字及下划线的特殊符号(?!.*[\u4E00-\u9FA5]) 这句的意思是后⾯不能有汉字. 表⽰匹配除“\n”之外的任何单个字符。
若要匹配包括“\n”在内的任意字符，请使⽤诸如“[\s\S]”之类的模式。
* 表⽰零次或多次匹配前⾯的字符或⼦表达式。
例如，to* 匹配“t”和“too”。
* 等效于 {0,}。
得出正则表达式：(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}使⽤if (value.match(/(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}/)==null) 判断即可要求⼆：判断输⼊的字符串是否包含数字、⼩写字母、⼤写字母以及特殊字符四种中⾄少三种的8-20位字符本次使⽤vue.js+ElementUI实现判断密码强度并⽤进度条样式进⾏提⽰强度是否符合先编写界⾯代码：<div><el-form :model="registerFormData" ref="registerForm" :rules="rules"><el-form-item label="密码" :label-width="formLabelWidth" prop="password"><el-input show-password type="password" v-model="registerFormData.password" autocomplete="off" placeholder="8-20位字符在数字、⼩写、⼤写字母以及特殊字符中四选三"></el-input><el-progress :percentage="passwordPercent" :format="passwordPercentFormat"></el-progress></el-form-item><el-form-item label="再次输⼊密码" :label-width="formLabelWidth" prop="comfirmPassword"><el-input v-model="firmPassword" autocomplete="off"></el-input></el-form-item></el-form></div>然后在vue的data中定义需要⽤到的变量，编写并绑定密码和再次输⼊密码框的验证规则函数data(){const validatePassword = (rule, value, callback) => {if (value === '') {callback(new Error('请输⼊密码'));} else {//6-20位包含字符、数字和特殊字符var ls = 0;if (this.registerFormData.password !== '') {if(this.registerFormData.password.match(/([a-z])+/)){ls++;}if(this.registerFormData.password.match(/([0-9])+/)){ls++;}if(this.registerFormData.password.match(/([A-Z])+/)){ls++;}if(this.registerFormData.password.match(/([\W])+/) && !this.registerFormData.password.match(/(![\u4E00-\u9FA5])+/)){ ls++;}if(this.registerFormData.password.length<6 || this.registerFormData.password.length>20 ){callback(new Error('要求6-20位字符'));ls=0;}if(this.registerFormData.password.match(/([\u4E00-\u9FA5])+/)){callback(new Error('不能包含中⽂字符'));ls=0;}switch (ls) {case 0: this.passwordPercent = 0;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;case 1: this.passwordPercent = 33;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;case 2: this.passwordPercent = 66;callback(new Error('数字、⼩写字母、⼤写字母以及特殊字符中四选三'));break;case 3:case 4: this.passwordPercent = 100;break;default: this.passwordPercent = 0;break;}}callback();}};const validateConfirmPassword = (rule, value, callback) => {if (value === '') {callback(new Error('请输⼊密码'));} else {if (firmPassword !== this.registerFormData.password) {callback(new Error('两次输⼊的密码不⼀致'));// this.$refs.ruleForm.validateField('checkPass');}callback();}};return{passwordPercent:0,//表单变量registerFormData: {password:'',comfirmPassword: '',},formLabelWidth: '120px'},rules: {password:[{required: true, validator: validatePassword, trigger: ['blur', 'change'] },],comfirmPassword:[{required: true, validator: validateConfirmPassword, trigger: ['blur', 'change'] }],},}接着编写，ElementUI中的进度条判断函数，即<el-progress :percentage="passwordPercent" :format="passwordPercentFormat">这句界⾯代码中format绑定的函数passwordPercentFormat(percentage){return percentage === 100 ? '符合' : `不符`;}最后可以通过css调整⼀下输⼊框的长度<style scoped>.el-form-item{width: 500px;}</style>这样就可以实现使⽤进度条提⽰密码强度的效果附上：判断字符串是否符合⼿机号码规范/^1[34578]\d{9}$/ps：下⾯给⼤家分享vue + elementUi 实现密码校验<el-form-item v-else label="密码" label-width='150px' prop="password"><el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input></el-form-item><el-form-item v-else label="确认密码" label-width='150px' prop="repassword"><el-input :placeholder="info.repassword" v-model="info.repassword" style="width: 500px"></el-input></el-form-item>data() {var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输⼊密码'))} else if (value !== .password) {callback(new Error('两次输⼊密码不⼀致!'))} else {callback()}}return {info: {},rules: {password: [{ required: true, message: '请输⼊密码', trigger: 'blur' },{ pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/, message: '密码为数字，⼩写字母，⼤写字母，特殊符号⾄少包含三种，长度为 8 - 30位，密码不能包含⽤户名，公司名称(lidian), 公司域 ],repassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]}}},总结以上所述是⼩编给⼤家介绍的vue.js+ElementUI实现进度条提⽰密码强度效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
vue 密码强度判断规则
vue 密码强度判断规则在Vue.js中，密码强度判断通常是通过前端验证来实现的。
以下是一般情况下密码强度判断的规则，这些规则也可以用于其他前端框架或纯JavaScript环境：1. 密码长度：确保密码达到一定的最小长度，例如8个字符。
```javascriptfunction isPasswordLengthValid(password) {return password.length >= 8;}```2. 包含字母和数字：强密码通常包含字母（大写和小写）和数字。
```javascriptfunction hasLettersAndNumbers(password) {return /[a-zA-Z]/.test(password) && /\d/.test(password);}```3. 包含特殊字符：强密码可能包含特殊字符，如符号或标点符号。
```javascriptfunction hasSpecialCharacters(password) {return /[!@#$%^&*(),.?":{}|<>]/.test(password);}```4. 避免常见单词和模式：避免使用常见的密码、用户名或者简单的模式。
```javascriptfunction isNotCommonPassword(password, commonPasswords) {return !commonPasswords.includes(password);}```5. 混合字符类型：结合字母（大写和小写）、数字和特殊字符以增加密码复杂性。
```javascriptfunction isPasswordComplex(password) {// 自定义规则，根据实际需求调整// 可以根据包含的字符类型数量来判断密码的复杂性const typesCount = /[a-z]/.test(password) + /[A-Z]/.test(password) + /\d/.test(password) + /[!@#$%^&*(),.?":{}|<>]/.test(password);return typesCount >= 3;}```在Vue.js中，你可以将这些验证规则集成到表单验证或用户注册流程中，通过监听密码输入的事件，实时检查密码强度是否符合要求，并在界面上提供相应的提示信息。
javascript实现前端input密码输入强度验证
javascript实现前端input密码输⼊强度验证本⽂实例为⼤家分享了js实现密码输⼊强度验证的具体代码，供⼤家参考，具体内容如下需求：1.需要对⽤户输⼊的密码进⾏验证，验证的级别分为强中弱，如果输⼊的密码强度少于6时，则不会验证，只有密码强度在6-20时才会进⾏验证。
相关的正则//密码为⼋位及以上并且字母数字特殊字符三项都包括var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");var enoughRegex = new RegExp("(?=.{6,}).*", "g");2.密码的显⽰与隐藏，点击⼩眼可以对密码进⾏显⽰或者隐藏。
具体代码html部分：<div class="wrapper"><div class="input_box"><input type="password" name="" placeholder="请输⼊密码" oninput="passValidate(this)" id="inputPwd" value=""><div class="eye_icon"></div></div><p>请⾄少使⽤字母、数字、符号两种类型组合的密码，长度为6~20位。
JS密码强度校验的正则表达式（简单且好用）
JS密码强度校验的正则表达式（简单且好⽤）最近⼀直在做通⾏证项⽬，⾥⾯的注册模块中输⼊密码需要显⽰密码强度（低中⾼）。
今天就把做的效果给⼤家分享下，代码没有⽹上搜索的那么复杂，能够满⾜⼀般的需求。
html 代码如下：<!DOCTYPE HTML><html lang="en"><head><meta charset="utf-8"/><title>密码强度</title><style type="text/css">#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}.strengthLv1{background:red;height:6px;width:40px;}.strengthLv2{background:orange;height:6px;width:80px;}.strengthLv3{background:green;height:6px;width:120px;}</style></head><body><input type="password" name="pass" id="pass" maxlength="16"/><div class="pass-wrap"><em>密码强度：</em><div id="passStrength"></div></div></body></html><script type="text/javascript" src="js/passwordStrength.js"></script><script type="text/javascript">new PasswordStrength('pass','passStrength');</script>js 代码如下：function PasswordStrength(passwordID,strengthID){this.init(strengthID);var _this = this;document.getElementById(passwordID).onkeyup = function(){_this.checkStrength(this.value);}};PasswordStrength.prototype.init = function(strengthID){var id = document.getElementById(strengthID);var div = document.createElement('div');var strong = document.createElement('strong');this.oStrength = id.appendChild(div);this.oStrengthTxt = id.parentNode.appendChild(strong);};PasswordStrength.prototype.checkStrength = function (val){var aLvTxt = ['','低','中','⾼'];var lv = 0;if(val.match(/[a-z]/g)){lv++;}if(val.match(/[0-9]/g)){lv++;}if(val.match(/(.[^a-z0-9])/g)){lv++;}if(val.length < 6){lv=0;}if(lv > 3){lv=3;}this.oStrength.className = 'strengthLv' + lv;this.oStrengthTxt.innerHTML = aLvTxt[lv];};效果图：使⽤说明：1、对象的第⼀个参数是密码输⼊框的 id，第⼆个参数是密码强度长条的 id。
js密码校验 简书
js密码校验简书第一：随着Web应用的普及，用户的账户安全变得尤为重要。
密码是最常见的身份验证方式之一，因此在前端开发中，实现有效的JavaScript密码校验成为保障用户账户安全的必要步骤。
本文将深入讨论JavaScript密码校验的实现方法及最佳实践。
第二：密码安全性要求1.密码长度：为了提高密码的安全性，一般建议设置一个较长的密码，通常不少于8个字符。
较长的密码通常更难被破解。
2.包含字符类型：一个安全的密码应该包含不同类型的字符，包括大写字母、小写字母、数字和特殊字符。
这样可以增加密码的复杂度，提高安全性。
3.不使用常见密码：禁止用户使用过于简单或常见的密码，例如“123456”、“password”等，以免易受到密码猜测攻击。
第三：JavaScript密码校验实现1.密码长度检验：javascriptfunction checkPasswordLength(password) {return password.length>=8;}通过简单的字符串长度检验，可以确保密码满足最小长度要求。
2.包含字符类型检验：javascriptfunction checkPasswordComplexity(password) {// 使用正则表达式检验密码是否包含大写字母、小写字母、数字和特殊字符const regex =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*] +$/;return regex.test(password);}通过正则表达式，可以检验密码是否包含各种字符类型，以增加密码的复杂度。
3.常见密码检验：javascriptfunction checkCommonPasswords(password) {const commonPasswords =["123456","password","qwerty","admin"];return!commonPasswords.includes(password.toLowerCase());}通过检查密码是否在常见密码列表中，可以降低用户使用弱密码的风险。
js验证密码强度解析
js验证密码强度解析这篇⽂章我们来说⼀个验证密码强度的例⼦，⼤家在进⼊⼀个⽹站的时候，往往都会先注册⼀个账号，然后输⼊密码，在输密码的时候，系统会根据我们输⼊的密码组成的复杂程度来给你的密码显⽰⼀个密码强度，⼀般就是强中弱三种，我们先来说⼀下密码验证的原理，原理明⽩了，js代码就好写了，今天的代码会⽤到正则表达式。
⾸先说⼀下密码强度的三种等级是如何划分的？弱：⼀般就是纯数字或纯⼩写字母或者纯⼤写字母组成的，这种密码较简单，所以安全等级为弱。
中：由上述情况中的任意两种组成的密码强度为中。
强：上述三种情况都有。
再来说⼀下表⽰强中弱的三个div随着密码的输⼊来显⽰对应的强度，⾸先我们先写⼀个class名为active的样式，颜⾊随便写⼀下，然后判断完输⼊的密码强度等级之后，把对应的强度的div的class名改为active就可以了。
写代码吧：html：<div id = 'div1'><input type="text" id = 'password' placeholder="密码"/><div id = 'intension'><div>弱</div><div>中</div><div>强</div></div></div>css：<style>#div1{width: 350px; height: 200px; background-color: orange; border: 1px solid black; margin: 100px auto; text-align: center; padding-top: 50px}#intension div{background-color: gray; width: 80px; height: 20px; text-align: center; line-height: 20px; margin: 5px; float: left; }#intension{width: 270px; margin-left: 40px}#password{width: 300px; height: 30px; font-size: 18px;}#intension .active{background-color: pink}</style>js代码：万年不变的获取id：var oPassword = document.getElementById("password");var oDiv = document.getElementById("intension");var nodes = oDiv.getElementsByTagName("div");然后⽤正则表达式来判断密码强度oPassword.onkeyup = function(){var oValue = oPassword.value;for(var i = 0; i < nodes.length; i++){nodes[i].className = '';}if(/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)){nodes[2].className = "active";}else if(/^\d+$/.test(oValue) || /^[A-Z]+$/.test(oValue) || /^[a-z]+$/.test(oValue)){nodes[0].className = "active";}else{nodes[1].className = "active";}}这样我们的验证密码强度就完成了！以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
基于JavaScript的密码强度检测
r et u r n 0：／ ／密 码太 短 Mode s=O： f or ( i =0：i <s Pw．1engt h：i ++) ( №des I =char Mode( s PW．char codeAt ( i ) ) ： }／／测试每一个字符的类 别并统计一共有多少种模式． r et u r n bi t Tot al (Modes ) ： } f unct i on pwSt r engt h( p wd) f ／／pWSt r engt h函数根据不同的级别显 示不 同的颜 色 O c ol or=’#ee e ee e。 ： L c 010r=。#FFOOOO’ ： M c 010r=”#FF9900’： H c 010r=’#33CCOO。 ： i f ( pWd==nuI l l {pwd一”) { Lc010r =Mcol or _Hc010r =0一col or ： } el sef S- l evel =check St r ong( pWd) ： s wi t c h( S 1evel ) { c a s e O： Lcol or ：Mcol or =Hcol or =0- c010r ； c a s e 1：
doc岫ent ．get El ement ByI d( ’st r ength_L’) ．s t yl e．backgr ound- Lc010r ： document ．get El e聃nt ByI d( ’st r ength_M’) ．s t yl e．backgr ound=Mcol or ： doc啪ent ．get El ement ByI d( ’st r ength- H”) ．s t yl e．backgr ound=Hcol or ： r et urn； ) <／ s cr i pt > ( f o瑚name=f or ml act i on=。’> 输入 密码： <i np ut t ype - pas s wor d s i ze=10 onKe yup =pWSt r eng t h( t hi s ．va l ue) on Bl ur =p WSt r en gt h( t hi s ．v al ue) > <br >密码强度： <t abl e wi dt h=’217’bor der =’1’cel l s paci ng=’O” cel l paddi ng：’1’border col or =’#cccccc’hei ght =’23”
js正则表达式验证密码强度【推荐】
js正则表达式验证密码强度【推荐】效果图：代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>验证密码强度</title><style type="text/css">*{margin: 0;padding: 0;}body{background:#ccc;}#demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;}#strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;}.lv1{background:red;}.lv2{background:blue;width:200px;}.lv3{background:green;width:300px;}</style></head><body><div id="demo"><label for="ipt">密码：</label><input type="text" id="ipt"><br/><em>密码强度：</em><em id="strength"></em><div id="strength_length"></div></div></body><script type="text/javascript">(function(window){function $(id){return document.getElementById(id);};var arr = ["","低","中","⾼"];// 获取对象var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length");// 密码输⼊事件ipt.onkeyup = function(){var s = 0;var txt = this.value;if( /[a-zA-Z]/.test(txt) ){s++;};if( /[0-9]/.test(txt) ){s++;};if( /[^0-9a-zA-Z]/.test(txt) ){s++;};if( txt.length <6 ){s = 0;};strength.innerHTML = arr[s];strLength.className = "lv" + s;}})(window)</script></html>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。
Javascript校验密码复杂度的正则表达式
Javascript校验密码复杂度的正则表达式
⽬前使⽤的正则表达式如下：
复制代码代码如下:
(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}
对应的验证规则是：密码中必须包含字母、数字、特称字符，⾄少8个字符，最多30个字符。
这个正则表达式在C#可以正常使⽤，但是在Javascript中却有问题。
请问是在js中如何写这样的正则表达式？
测试字符串：a123456-
解决⽅法如下所⽰：
把\d改为[0-9]问题就解决了，正则表达式如下：
复制代码代码如下:
var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}');
console.log(regex.test('a123456-'));
下⾯在看下正则表达式校验密码的⽅法
密码规则：6-20位字母数字组合：
复制代码代码如下:
var reg = /^[A-Za-z0-9]{6,20}$/;
以上所述是⼩编给⼤家介绍的Javascript校验密码复杂度的正则表达式，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
在此也⾮常感谢⼤家对⽹站的⽀持！。
js 正则 复杂密码
js 正则复杂密码
下面是一个使用JavaScript编写的正则表达式，用于判断密码的复杂程度：
```javascript
var strongRegex = new RegExp("^(?=.{8,})(?=.*(A-Z))(?=.*(a-z))(?=.*(0-9))(?=.*\\W).*$","g");
```
这个正则表达式的含义是：
- `^(?=.{8,})`：密码长度至少为8位。
- `(?=.*(A-Z))`：密码至少包含一个大写字母。
- `(?=.*(a-z))`：密码至少包含一个小写字母。
- `(?=.*(0-9))`：密码至少包含一个数字。
- `(?=.*\\W)`：密码至少包含一个特殊字符。
你可以根据自己的需求修改正则表达式的内容，以满足不同的复杂程度要求。
请注意，使用正则表达式判断密码的安全性是不够充分的，还需要结合其他安全措施来确保密码的安全性。
js正则表达式简单校验方法
js正则表达式简单校验⽅法对于字符串的⼀些操作，可以通过正则表达式来实现。
⼀般的搜索操作想必⼤家已经学会，今天就来说说它的校验功能，这样可以帮助判断字符串类型或者是其它的组成，⽐如密码、中⽂、字符串的组成等。
下⾯就js正则表达式的校验带来内容分享，同时要考虑在js中⽀持的类型。
1.常见js正则校验（1）校验密码强度密码的强度必须是包含⼤⼩写字母和数字的组合，不能使⽤特殊字符，长度在8-10之间。
^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$（2）校验中⽂字符串仅能是中⽂。
^[\\u4e00-\\u9fa5]{0,}$（3）由数字、26个英⽂字母或下划线组成的字符串^\\w+$2.js⽀持与不⽀持类型js⽀持⼤多数元字符字符组段落起始和终结，以及伪逻辑⾏匹配优先量词 .* 和忽略优先量词 .*?正向环视 ?=反向引⽤ \1 \2⾮捕获的分组 ?:常⽤修饰符 /igxjs 不⽀持的有逆向环视（逆向断⾔）?<=命名分组 ?=p分组内部修饰符 (?=i)固化分组 ?>占位量词 .*+js正则表达式校验实例/*是否带有⼩数*/function isDecimal(strValue ) {var objRegExp= /^\d+\.\d+$/;return objRegExp.test(strValue);}/*校验是否中⽂名称组成 */function ischina(str) {var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/return reg.test(str); /*进⾏验证*/}/*校验是否全由8位数字组成 */function isStudentNo(str) {var reg=/^[0-9]{8}$/; /*定义验证表达式*/return reg.test(str); /*进⾏验证*/}/*校验电话码格式 */function isTelCode(str) {var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;return reg.test(str);}/*校验邮件地址是否合法 */function IsEmail(str) {var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);}到此这篇关于js正则表达式简单校验⽅法的⽂章就介绍到这了,更多相关js正则表达式校验内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
JS对密码强弱的判断
JS对密码强弱的判断<div class="email_reg m_part"><form class="reg_form" id="reg_form"><p>邮箱注册</p><div class="control"><label>邮箱</label><input class="email" name="email"><span>请填写本⼈常⽤邮箱，该邮箱将作为登录账号</span></div><div class="control"><label>密码</label><input type="password" name="password"><span>字母、数字或者英⽂符号，6-20位</span></div><div class="control"><label>确认密码</label><input type="password" name="confirmpwd"><span>请再次输⼊密码</span></div><input class="submit" id="submit_btn" onclick="return false;" type="submit" value="注册"> </form></div><script>$("#reg_form").validate({ok:function(){alert("登录啦！");}});</script>(function(jQuery){"use strict";(function(factor){if(jQuery && !jQuery.fn.validate){factor($);}})(function($){var flagAll = {email:false,password:false,samePwd:false};var methods = {settings:null,init:function(item){methods.settings = $.extend(true,{},$.fn.validate.defaults,item);return this.each(function(){var cur = $(this);var checkItem = cur.find("input[name]");methods.subCheck(cur);methods.checkItem(checkItem);});},subCheck:function(box){var btn = box.find("input[type='submit']");btn.on("click",function(){methods.allCheck(box);});},allCheck:function(box){var checkItem = box.find("input[name]");$.each(checkItem,function(i,v){var cur = $(v);methods.blueE(cur);methods.checkFmt(cur);});if(flagAll.email && flagAll.password && flagAll.samePwd){ alert("submit");}},checkItem:function(item){$.each(item,function(){var cur = $(this);methods.checkSingle(cur);});},checkSingle:function(item){item.on("blur",function(){methods.blueE(item);methods.checkFmt(item);});item.keydown(function(e){var code = e.keyCode;if(code == 13){methods.allCheck(item);}}).keyup(function(e){methods.blueE(item);});},blueE:function(item){var val = item.val();if(val == ""){var txt = methods.getType(item);methods.errorInfo(item,txt);}else{var error = item.next(".error");error.length > 0 ? error.remove() : '';//methods.checkFmt(item); 边输⼊变验证}},getType:function(item){var type = item.attr("name");var txt = "";switch (type){case "email":txt = methods.settings.emailTxt;break;case "password":txt = methods.settings.pwdTxt;break;case "confirmpwd":txt = methods.settings.confirmTxt;break;}return txt;},checkFmt:function(item){var val = item.val();var type = item.attr("name");switch (type){case "email":methods.checkEmailFmt(item,val);break;case "password":methods.checkPwdFmt(item,val);break;case "confirmpwd":methods.checkPwdFmt(item,val,true);}},checkEmailFmt:function(item,val){var reg,info;reg =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.com)$/;info = "邮箱地址不正确，请重新输⼊";var flag = reg.test(val);if(flag){flagAll.email= true;}else{methods.errorInfo(item,info);flagAll.email = false;}},checkPwdFmt:function(item,val,state){var reg,info;reg = /^[-,.?:;'"~!`#%<>=_\@\*\$\^\&\(\)\{\}\[\]\/ | 0-9 |A-Z |a-z]{6,20}$/; info = "请输⼊6-20位合理字符";var flag = reg.test(val);if(flag){if(state){methods.checkDoublePwd(val,item);}else{methods.checkSafe(val,item);flagAll.password= true;}}else{methods.errorInfo(item,info);state ? flagAll.samePwd = false : flagAll.password = false;}},checkDoublePwd:function(val,item){var pwd = $("input[name='password']").val();if(pwd != val){flagAll.samePwd = false;var txt = "两次密码不⼀致，请重新输⼊";methods.errorInfo(item,txt);}else{flagAll.samePwd = true;}},checkSafe:function(val,item){var Modes;for (var i=0;i<val.length;i++){//密码模式Modes|=methods.CharMode(val.charCodeAt(i));}var level = methods.bitTotal(Modes);methods.showLevel(level,item);},showLevel:function(level,item){switch (level){case 1:var txt = "密码设置太简单，安全性弱";methods.errorInfo(item,txt,"error");break;case 2:var txt = "密码安全性中";methods.errorInfo(item,txt,"middlePwd");break;default :var txt = "密码安全性强";methods.errorInfo(item,txt,"strongPwd");}},CharMode:function(iN){if (iN>=48 && iN <=57) //数字return 1;if (iN>=65 && iN <=90) //⼤写return 2;if (iN>=97 && iN <=122) //⼩写return 4;elsereturn 8;},bitTotal:function(num){var modes=0;for (var i=0;i<6;i++){if (num & 1) modes++;num>>>=1;}return modes;},/*checkSafe:function(val,item){var reg1 = /^\d+$/,reg2 = /^[a-zA-Z]$/,reg3 = /^(\d*)([a-zA-Z]{1,2})(\d*)$/,reg4 = /^([a-zA-Z]*)(\d{1,2})([a-zA-Z]*)$/;var regm = /^([a-zA-Z0-9]*)([-,.?:;'"~!`#%<>=_\@\*\$\^\&\(\)\{\}\[\]\/]{1,2})([a-zA-Z0-9]*)$/; if((reg1.test(val) || reg2.test(val) || reg3.test(val) || reg4.test(val)) && val.length == 6){ var txt = "密码设置太简单，安全性弱";methods.errorInfo(item,txt,"error");}else if(regm.test(val)){var txt = "密码安全性中";methods.errorInfo(item,txt,"middlePwd");}else{var txt = "密码安全性强";methods.errorInfo(item,txt,"strongPwd");}},*/errorInfo:function(item,txt,cls){var scls = cls || "error";var div = "<span class='validate_cls "+scls+"'>"+txt+"</span>";if(item.next(".validate_cls").length == 0){$(div).insertAfter(item);}else{var box = item.next(".validate_cls");box.html(txt).removeClass().addClass("validate_cls").addClass(scls);}}};$.fn.validate = function(param){return methods.init.apply(this,param);};$.fn.validate.defaults = {emailTxt:"请输⼊邮箱",pwdTxt:"请输⼊密码",confirmTxt:"请确认密码"};});})(jQuery);。
JS基于正则表达式实现的密码强度验证功能示例
JS基于正则表达式实现的密码强度验证功能⽰例本⽂实例讲述了JS基于正则表达式实现的密码强度验证功能。
分享给⼤家供⼤家参考，具体如下：先来看看运⾏效果：具体代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title> </title></head><style type="text/css">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;}</style><body><div class="container"><label>密码</label><input type="text" id="inp1" maxlength="16"><!--<input type="password" id="inp1" maxlength="16"/>--><div class="pass-wrap"><em>密码强度：</em><em id="strength"></em><div id="strengthLevel" class="strengthLv0"></div></div></div><script>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];};*/</script></body></html>PS：这⾥再为⼤家提供⼏款相关在线⼯具供⼤家参考使⽤：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<input type="password" name="pass" id="pass" />
<spห้องสมุดไป่ตู้n id="passstrength"></span>
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
//下面的正则表达式建议各位收藏哦，项目上有可能会用得着
$('#pass').keyup(function(e){
//密码为八位及以上并且字母数字特殊字符三项都包括var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
} elseif (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} elseif (mediumRegex.test($(this).val())) {
$('#passstrength').html('Weak!');
}
returntrue;
});