JavaScript动态验证密码强度的实现方法

通常我们会在一些网站的注册页面或者密码更改页面上发现，当我们输入密码的时候，会有一个类似进度条的长条形提示用户密码强度。下图：

我看到有人用几个不同的图片替换，看起来还可以，但是不太好。所以我用了其他方式。

本质上，颜色区域的长度根据用户输入的不同密码强度而改变。

密码强度栏本质上是一个div，其他标签都可以。div中有span标签，我通过改变span的长度和颜色来表达密码强度。原理很简单，但是在操作过程中，可能会出现一些问题和头疼。

1.首先，在html页面中定义一个输入框用于输入密码，一次一个div，在div中放一个span标签，并设置相应的属性、类型、名称、值、类、id等。

font color=' # ff 0000 ' */font password:输入类型=' text ' name=' password ' id=' password ' value='请输入密码' onfocus=' password clear()' on bulr=' pwd complex()'，password validate()' onkeyup=' pwd complex()'//TDD font id=' pwd tip '不少于6个字符/fontbr/2密码强度：

div class=' pwdstrong ' span class=' cinner progress ' id=' inner progress '/span/div font id=' strong thtip '/font 2。为标签设置相应的css以控制其样式并使其感觉美观：

Style type='text/css'/*用于修改外部边框div */。pwdstrongth { border : solid 1 px # 00000；border-radius :5 px；height:15px宽度width:150px}/*用于设置span标签的初始样式*/。cinner progress { display : block；高度： 100%；背景-color : transparent；border-radius : 5px；宽度： 100%；}/*以下四个将用于设置具有不同密码强度的span标记的样式*/. strong LV 1 { display : block；高度： 100%；border-radius : 5px；背景：红色；宽度：25%；} . strength v2 { display : }块；高度： 100%；border-radius : 5px；背景：橙色；宽度：50%；} . strength LV 3 { display : }块；高度： 100%；border-radius : 5px；背景# 09F宽度：75%；} . strength LV 4 { display : }块；高度： 100%；border-radius : 5px；背景：绿色；宽度：100%；}/style3。通过检测用户输入的密码强度，编写相应的JavaScript方法调用不同的样式来表达密码强度。密码强度的规则可以随意定义，只需在密码输入框的on bulr事件和onkeyup事件中调用以下方法即可：

用于判断密码强度的函数pwdComplex()//{ var pwdobj=document . getelementbyid(' password ')；//获取密码输入框对象var pwdtip=document . getelementbyid(' pwdtip ')；//获取密码提示文本对象varpwdprogress=document . getelementbyid(' inner progress ')；//获取span label对象varstrong tip=document . getelementbyid(' strong tip ')；//获取对象var regxs=new Array()的密码强度提示文本；//定义一个数组来存储不同的正则表达式regxs[0]=/[a-za-z0-9 _]/g；regxs[1]=/[a-z]/g；regxs[2]=/[0-9]/g；regxs[3]=/[A-Z]/g；var val=pwdobj.value//获取用户输入的密码var len=val.length//获取用户输入的密码长度var sec=0；//定义一个变量，用于存储密码强度if (len=6) //用于判断用户输入的密码强度{//至少六个字符为(var I=0；i regxs.lengthI) //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合，强度为1 { if(val . match(regxs[I]){ sec；}}}if(sec==0) //通过不同的密码强度调用不同的样式{strongtip。innertext=//set attribute(' class '，' className ')中的class指的是改变类的属性，所以要加引号。classname是span标记的类名和相应的样式名pwdprogress . setattribute(' class '，' cinner progress ')；} else if (sec==1) {strongtip。innertext='强度：弱'；strong thtip . style . color=' red '；pwd progress . SetAttribute(' class '，' strength v1 ')；} else if (sec==2) {strongtip。innertext='强度：中等'；strong thtip . style . color=' orange '；pwd progress . SetAttribute(' class '，' strength v2 ')；} else if (sec==3) {strongtip。innertext='强度：强'；strong thtip . style . color=' # 09F '；pwd progress . SetAttribute(' class '，' strenglv 3 ')；} else if (sec==4) {strongtip。innertext='强度：超强'；strong thtip . style . color=' green '；pwd progress . SetAttribute(' class '，' strength lv4 ')；}}以上是边肖介绍的JavaScript动态检查密码强度的实现方法，实现了模拟后台数据登录的效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！