JS利用正则表达式实现简单的密码强弱判断实例

实现功能：

1、输入字符要在6-16之间；小于6个字符或大于16个字符时给予提示，而且强弱不显示；为0时，也给予提示；

2、当密码在6-16个字符之间时，如果密码全是数字或全是字母，显示弱；密码是数字与字母的组合，则显示强；若为字母数字加下划线，则为强；

效果图如下：

代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title/title style .嗯车身{相对位置：高度： 100像素；宽度： 450像素；背景-颜色：小麦；} .mm-top {高度：35 px宽度： 450像素；背景-颜色：小麦；} .mm-Sr {高度：30 px宽度： 100像素；向左浮动：文本对齐：中心；线高： 30px} #mm-pwd{左侧浮动：高度：25px背景-颜色：幽灵白色；边界半径： 5px宽度： 150像素；} .mm-btm {高度： 40px宽度： 140像素；相对位置：边距-左侧： 110像素；} #lv1、#lv2、# lv3 { height: 30px宽度： 40px边框-top: 4px实心盖恩斯伯勒；左边距左： 3px向左浮动：font-size : 18px文本对齐：中心；线高： 25px}/style/head body div class=' mm-body ' div class=' mm-top ' span class=' mm-Sr '请输入密码：/span form方法=' get ' action=' data。' html '输入类型=' password ' id=' mm-pwd ' on key up=' show()'//form span id=' mm-PD ' style=' color : red；font-size : 12px线高： 30px/span/div class=' mm-btm ' div id=' lv1 '弱/div div id='lv2 '中/div div id='lv3 '强/div！-强度判断也可用表格做表格边框=' 0px '单元格填充=' 0px '单元格间距=' 1px ' tr高度=' 20px ' TD宽度=' 40px ' id=' lv1 ' style=' border-top : 3px实心深灰色；'弱/TD TD TD width=' 40px ' id=' lv2 ' style=' border-top : 3px纯色深灰色；'中/TD TD TD width=' 40px ' id=' lv3 ' style=' border-top : 3px纯色深灰色；'强/TD/tr/table-/div/div/body/html脚本语言=' JavaScript '函数show(){ var a=document。getelementbyid(' mm-pwd ').价值；if(a . length==0){ document。getelementbyid(' mm-PD ').innerHTML='密码不能为空！} else if(a . length 6){ document。getelementbyid(' mm-PD ').innerHTML='密码长度小于6个字符！} else if(a . length=6a。长度=16){文档。getelementbyid(' mm-PD ').innerhtml=var reg=/^[0-9]{6,16}$|^[a-za-z]{6,16}$/；//全是数字或全是字母6-16个字符var reg1=/^[a-za-z0-9]{6,16}$/；//数字、26个英文字母6-16个字符var reg2=/^\w{6,16}$/；//由数字、26个英文字母或者下划线组成的字符串6-16个字符if(a . match(reg)){文档。getelementbyid(' lv1 ')。风格。bordertopcolor=' red} else if(a . match(reg1)){ document。getelementbyid(' lv1 ')。风格。bordertopcolor=' red文件。getelementbyid(' lv2 ')。风格。bordertopcolor='黄色；}否则if(a . match(reg 2)){ document。getelementbyid(' lv1 ')。风格。bordertopcolor=' red文件。getelementbyid(' lv2 ')。风格。bordertopcolor='黄色；文件。getelementbyid(' lv3 ')。风格。bordertopcolor='绿色'；} } else if(a . length 16){ document。getelementbyid(' mm-PD ').innerHTML='密码长度大于16个字符！文件。getelementbyid(' lv1 ')。风格。bordertopcolor=' gainsboro文件。getelementbyid(' lv2 ')。风格。bordertopcolor=' gainsboro文件。getelementbyid(' lv3 ')。风格。bordertopcolor=' gainsboro} }/脚本总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。