DDR爱好者之家 Design By 杰米
这篇文章我们来说一个验证密码强度的例子,大家在进入一个网站的时候,往往都会先注册一个账号,然后输入密码,在输密码的时候,系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度,一般就是强中弱三种,我们先来说一下密码验证的原理,原理明白了,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"; } }
这样我们的验证密码强度就完成了!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年04月18日
2024年04月18日
- 女神异闻录夜幕魅影黑谷清武器搭配 p5x手游黑谷清武器攻略
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE]
- 红馆40·陈慧娴《BackToPriscilla30thAnniversaryConcert2014Live》2CD[低速原抓WAV+CUE]
- 红馆40·王菲《王菲最精彩的演唱会》2CD[低速原抓WAV+CUE]
- 日本麦当劳×《柯南》联动:吃到汉堡就能找到凶手!
- 大神纯手搓打造PS掌机!原生运行PS1游戏
- 张信哲《拥有》[WAV分轨][461M]
- 央金兰泽《央金兰泽歌曲合集》[320K/MP3][218.8MB]
- 《U盘车载专用 3068首》[320K/MP3][24GB]
- 江淑娜.1996-长夜悄悄【点将】【WAV+CUE】
- 王馨平.1994-飞【宝丽金】【WAV+CUE】
- 邓丽君.1992-精选全集5CD(日本金牛宫版)【WAV+CUE】
- 女神异闻录夜幕魅影新手开荒指南分享 p5x手游公测开荒攻略大全
- 女神异闻录夜幕魅影开服阵容怎么搭配 p5x手游阵容配队攻略大全
- 女神异闻录夜幕魅影魅力怎么提升 p5x手游快速提升魅力攻略