javascript挑战编程技能-第六题:检查密码强度

简介: javascript挑战编程技能-第六题:检查密码强度

函数可以帮助我们抽象掉负责操作,还可以帮助我们构建可复用的组件。

开发一个程序,基于如下规则确定给定密码的强度。

1、如果只包含数字,则为非常弱的密码。

2、如果只包含字母,则为弱密码。

3、如果包含字母,至少有一个数字,并且字数不少于8个字符,则为强密码。

4、如果包含字母、数字和特殊字符,兵器字数不少于8字,则为非常强的密码。

要求:

1、创建passwordValidator函数,以密码为参数,返回一个可以帮助我们评估密码强度的值。不要让函数返回字符串,未来可能需要支持多种语言。

2、使用单条输出语句。

3、实时以图形和文字形式提供反馈。当用户输入一个密码时,确定其强度并显示结果。

代码实现如下,具体算法看注释

<body>
<div>
<input  id="inputString" type="text" placeholder="请输入密码" style="display: inline-block" onkeyup="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>


运行结果:


image.png

image.png

image.png

image.png

第六节课就到这里结束了吧,

谢谢你的阅读.

目录
相关文章
|
6月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
157 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
7月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
8月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
955 2
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 算法 安全
深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
在数字化时代,共享文件的安全性至关重要。本文聚焦Node.js环境,介绍如何通过JavaScript对象字面量构建数据结构管理文件安全信息,包括使用`bcryptjs`库加密密码和权限校验算法,确保高效且安全的文件共享。通过实例代码展示加密与权限验证过程,帮助各行业实现严格的信息资产管理与协作。
|
12月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
143 1
JavaScript控制台:提升Web开发技能的秘密武器
|
11月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
135 3
|
11月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2223 4

热门文章

最新文章