效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题验证密码强度/title style type=' text/CSS ' * { margin : 0；padd : 0；}正文{ background: # ccc} #演示{ width :400 pxpadding :50 px背景# efefefborder: 1px固体# 999;线高：40 px余量：100px自动0;} # strength _ length { height :6 px；宽度宽度：100 pxpadding :2 pxborder : 1px固体# CCC } . lv1 { background : red } . lv2 { background : blue }宽度宽度：200px} .lv3 {背景：绿色宽度width :300 px }/style/head body div id=' demo '标签为='ipt '密码：/标签输入类型='text' id='ipt'br/em密码强度：/emem id=' strength '/em div id=' strength _ length '/div/div/body script type=' text/JavaScript '(函数(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.valueif(/[a-zA-Z]/.test(txt)){ s；};if(/[0-9]/.test(txt)){ s；};if(/[^0-9a-zA-Z]/.test(txt)){ s；};if(txt。长度6){ s=0；};力量。innerHTMl=arr[s]；strllength。名称=' LV ' s；} })(窗口)/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！