函数可以帮助我们抽象掉负责操作,还可以帮助我们构建可复用的组件。
开发一个程序,基于如下规则确定给定密码的强度。
1、如果只包含数字,则为非常弱的密码。
2、如果只包含字母,则为弱密码。
3、如果包含字母,至少有一个数字,并且字数不少于8个字符,则为强密码。
4、如果包含字母、数字和特殊字符,兵器字数不少于8字,则为非常强的密码。
要求:
1、创建passwordValidator函数,以密码为参数,返回一个可以帮助我们评估密码强度的值。不要让函数返回字符串,未来可能需要支持多种语言。
2、使用单条输出语句。
3、实时以图形和文字形式提供反馈。当用户输入一个密码时,确定其强度并显示结果。
代码实现如下,具体算法看注释
<body>
<div>
<input id="inputString" type="text" placeholder="请输入密码" style="display: inline-block" οnkeyup="keyupFunc()">
<span id="outText" style="display: inline-block;color:white"></span>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
var spancolor = [
{ color: '#FF0000', text: '非常弱' },
{ color: '#FFB5B5', text: '弱' },
{ color: '#0000C6', text: '强' },
{ color: '#53FF53', text: '非常强' }
];
function analizeCharacter(char) {
var code = char.charCodeAt(0);
if(code >= 48 && code <= 57) return 1; // 数字
if((code >= 97 && code <= 122)||(code >= 65 && code <= 90)) return 2; // 字母
return 4; // 特殊字符 和标点符号
};
function passwordValidator(psw){
if(psw%1 === 0){//这里利用了js弱语言类型会自动转换的特性
return 0;//纯数字,为非常弱密码
}
var score = 0;
var hasForeign = false;
for(var i = 0;i < psw.length;i++) {
score += analizeCharacter(psw[i]);
if(analizeCharacter(psw[i]) === 4){
hasForeign = true;
}
}
if(score === psw.length*2 && !hasForeign || psw.length < 8){
return 1;//纯字母或长度小于8,为弱密码
}else if(!hasForeign){
return 2;//字母带数字,为强密码
}else{
return 3;
}
}
function keyupFunc(){
var inputString = $('#inputString').val();
$("#outText").text(spancolor[passwordValidator(inputString)].text);
$("#outText").css('background-color', spancolor[passwordValidator(inputString)].color);
}
</script>
</body>
运行结果:
第六节课就到这里结束了吧,
谢谢你的阅读.
有什么问题可以直接联系我本人微信:yu_xiaohu
希望大家关注我的个人公众号,有更新会在上面同步发布哦.
我是小虎Oni,希望你开心.