JavaScript如何实现注册时密码强度校验

  • 时间:
  • 2591人关注

这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,另外这篇文章主要知识点是关于js、密码强度校验、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:javascript
  • 编辑整理:武国英
  • 教程字数:2147字节
  • 阅读时间:大概11分钟
  • 下载本教程(DOC版)
  • 《Vue.js前端开发基础与项目实战》项目源码
  • JSON-handle
  • Quick Javascript Switcher
  • Vue.js devtools
  • JSON Formatter
  • 密码强度有4个状态,分别如下图。

    无密码状态

    JavaScript注册时密码强度校验代码

    密码低级状态

    JavaScript注册时密码强度校验代码

    密码中级状态

    JavaScript注册时密码强度校验代码

    密码高级状态

    JavaScript注册时密码强度校验代码

    实现的代码主要如下:

    HTML代码

    <input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
    <table border="0" cellpadding="0" cellspacing="0">
    <tr align="center">
    <td id="pwd_Weak" class="pwd pwd_c"> </td>
    <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
    <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
    </tr>
    </table>
    
    

    CSS代码

    .pwd{width:50px;height:20px;line-height:14px;padding-top:2px;} 
    .pwd_f{color:#BBBBBB;} 
    .pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
    .pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
    .pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
    .pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
    .pwd_c_r{border-right:1px solid #D0D0D0;} 
    .pwd_Weak_c_r{border-right:1px solid #BB2B2B;} 
    .pwd_Medium_c_r{border-right:1px solid #E9AE10;} 
    .pwd_Strong_c_r{border-right:1px solid #267A12;}
    

    JS代码

    function CheckIntensity(pwd) {
        var Mcolor, Wcolor, Scolor, Color_Html;    
        var m = 0;   
        //匹配数字
        if (/\d+/.test(pwd)) {
          debugger;
          m++;
        };
        //匹配字母
        if (/[A-Za-z]+/.test(pwd)) {     
          m++;
        };
        //匹配除数字字母外的特殊符号
        if (/[^0-9a-zA-Z]+/.test(pwd)) {      
          m++;
        };
        
        if (pwd.length <= 6) { m = 1; }
        if (pwd.length <= 0) { m = 0; }    
        switch (m) {
          case 1:
            Wcolor = "pwd pwd_Weak_c";
            Mcolor = "pwd pwd_c";
            Scolor = "pwd pwd_c pwd_c_r";
            Color_Html = "弱";
            break;
          case 2:
            Wcolor = "pwd pwd_Medium_c";
            Mcolor = "pwd pwd_Medium_c";
            Scolor = "pwd pwd_c pwd_c_r";
            Color_Html = "中";
            break;
          case 3:
            Wcolor = "pwd pwd_Strong_c";
            Mcolor = "pwd pwd_Strong_c";
            Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";
            Color_Html = "强";
            break;
          default:
            Wcolor = "pwd pwd_c";
            Mcolor = "pwd pwd_c pwd_f";
            Scolor = "pwd pwd_c pwd_c_r";
            Color_Html = "无";
            break;
        }
        document.getElementById('pwd_Weak').className = Wcolor;
        document.getElementById('pwd_Medium').className = Mcolor;
        document.getElementById('pwd_Strong').className = Scolor;
        document.getElementById('pwd_Medium').innerHTML = Color_Html;
      }  
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


    上一篇:介绍js实现倒计时关键代码

    下一篇:JavaScript实现飘落星星特效的代码详解

    相关内容

    • java与jsp的区别

      java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。 JSP和JAVA的区别,JSP算是JAVA一种技术吧,用在网页编程上,因为JAVA不能直接写在html上,但jsp能,jsp就是Servlet程序,当JSP收到客户的请求时,SCRIPTLET(脚本小程序)就会被执行,脚本段将被插入到JSP所生成的目标Servlet的Serivce函数中.所以脚本小程序不能写方法(函数),因为方法里面不能再有方法了.JSP的执行过程。 1、首先,JAVA是一门

      12-17JSP和JAVA的区别

      阅读更多
    • js可以替代java吗

      nodejs不会替代java。在虚拟机层面 node.js 基于的v8 VM看起来很不错,但和Java的 VM 一比,差距甚远。在服务器领域,特别是拥有众多 CPU 和大量内存的环境下,Java 的 VM 几乎是你能在地球上找到的最好的 VM。而v8既不能充分利用多CPU的性能,也不能将内存充分利用。Node.js是从前端转过来的,恰恰前端是计算机领域少数几个不需要计算机体系知识就能胜任的职业。想要真正做到像java那样水平,计算机体系性的知识必不可少。Node.js特别适合中小型系统的快速开

      12-13js能替代java吗

      阅读更多
    • JAVA直接访问jsp页面报404吗

      404表示的是路径未找到错误,解决办法如下: 【解决方法】 1、首先看错误信息 第一行 2、这里有出错的路径,也就是哪个找不到的路径 3、然后回程序中找调用这个路径的地方,确定路径写的是否正确,是否可达。 JSP页面运行时报的404错处理方法如下: 保证在你的Console窗口中看不到任何起到影响的Exception(jsp在编译的时候会先检查web.xml文件,如果全部正常,没有任何Exception的话,才会成功部署到.metadata\.plugins\org.eclipse.wst.server.

      12-12JAVA访问jsp页面报404吗

      阅读更多
    • jsp实质是java程序对吗

      JSP页面在本质上就是Servlet程序,当JSP页面在首次被访问时,Web容器就会将JSP页面转化为Servlet,只需要做一次。如index.jsp在首次被访问时,Web容器会将其翻译成一个index_jsp.java文件,即Servlet代码。 JSP是服务器端的一种基于java语言的网页技术,它是由一些JSP标记,java程序段以及HTML文件组成的结合体,以java语言作为其内置的脚本语言。实质上是通过调用JSP引擎来生成java文件,再将这个java文件编译成类文件,并执行这个类文件以生成动态

      12-05jsp实质是java程序吗

      阅读更多
    • jsp文件就是java文件吗

      jsp文件不是java文件,java是一种语言类似于C语言等的编程语言,而JSP(JavaServer Pages)是一种动态网页技术标准。jsp是一个网页页面,相当于复杂的html。其中可以插入script代码,当然也可以插入java代码。j ava是一个类文件,在java学习初期主要是写java文件的。如果不写页面的话是没有页面效果的。 1、JSP的写的代码,不利于代码重用。JAVA本来就是面向对象的语言,但在JSP中,体现不出来代码重用的优势。如果把一些通用的代码写成JAVA文件,就方便了很多,例

      12-02jsp文件是java文件吗

      阅读更多
    • JavaScript和jQuery实战手册

      JavaScript和jQuery实战手册

      JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

      大小:103 MBJavaScript

      点击下载
    • 看透JavaScript:原理、方法与实践

      看透JavaScript:原理、方法与实践

      本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

      大小:251 MBJavaScript

      点击下载
    • JavaScript数据可视化编程

      JavaScript数据可视化编程

      大小:61.8 MBjs编程

      点击下载
    • 你不知道的JavaScript 下卷

      你不知道的JavaScript 下卷

      本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

      大小:7 MBJavaScript

      点击下载
    • 21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML+CSS+JavaScript Web开发

      21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

      大小:104.9 MB前端

      点击下载
    • JavaScript+Vue+React全程实例

      JavaScript+Vue+React全程实例

      这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

      大小:59150 MB MJS实例

      点击下载
    • JavaScript高级程序设计

      JavaScript高级程序设计

      《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

      大小:23 MBJS程序设计

      点击下载

    学习笔记