前端JS正则校验密码之3种实现方式

简介: 这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。

匹配8-16位,至少有一个大写字母或小写字母,至少有一个数字,至少有一个特殊字符包括-`=\[\];',.~!@#$%^&*()_+|{}:"?,不过要注意不同语言的转义字符问题。

方式一和方式二实现如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>前端JS正则校验密码</title>
    <style type="text/css">
        *{
    
    margin: 0;padding: 0}
    </style>
</head>
<body>
    <script type="text/javascript">
        /**
         * 匹配8-16位,至少有一个大写字母或小写字母,至少有一个数字,至少有一个特殊字符包括-`=\[\];',.~!@#$%^&*()_+|{}:"?
         *
         * ^是正则表达式匹配字符串开始位置。
         * $是正则表达式匹配字符串结束位置。
         * ()是为了提取匹配的字符串,表达式中有几个()就有几个相应的匹配字符串。
         * []是定义匹配的字符范围,匹配的字符在[]中。
         * {}一般用来表示匹配的长度,比如\s{3} 表示匹配三个空格,\s{1,3}表示匹配一到三个空格。
         */
        var arrayList = new ArrayList();
        arrayList.add("123");
        arrayList.add("aaa");
        arrayList.add("AAA");
        arrayList.add("123a");
        arrayList.add("123A");
        arrayList.add("123789aOa");
        arrayList.add("123789AoA");
        arrayList.add("123789A $");
        arrayList.add("123789a $");
        arrayList.add("123Ao A$");
        arrayList.add("123aO a$");
        arrayList.add("123789A$");
        arrayList.add("123789a$");
        arrayList.add("123AoA$-");
        arrayList.add("123aOa$-");
        arrayList.add("123AoA()$");
        arrayList.add("1234567a");
        arrayList.add("aaabbb&&&");
        arrayList.add("aaabbb&&&1");
        arrayList.add("123761123&&&");
        arrayList.add("           ");
        arrayList.add("    7613&&&");
        arrayList.add("    7613aa&&&");
        arrayList.add("    7613AA&&&");
        arrayList.add("    7613Ss&&&");
        for (var i = arrayList.size() - 1; i >= 0; i--) {
    
    
            // console.log(arrayList.get(i));
            checkAction1(arrayList.get(i));
            checkAction2(arrayList.get(i));
            console.log("\n");

        }        


        /**
         * 前端正则检验密码 - 必须满足5种情况才ture
         * 规则拆分写
         */
        function checkAction1(password){
    
        
            var upperCaseOrlowerCase = /[a-zA-Z]/;// 判断是否有大写或小写
            var number = /[0-9]/;// 判断是否有数字
            var specificSymbol = /[-`=\[\];',.~!@#$%^&*()_+|{}:"?]/;// 判断是否有特殊符号,注意在C#页面中需要两个@@才转义成一个
            var length=/^.{8,16}$/;// 判断是否长度为8-16位
            var space=/^\S+$/;// 判断必须非空格
            var test = upperCaseOrlowerCase.test(password) && specificSymbol.test(password) && number.test(password) && length.test(password) && space.test(password);
            console.log(test+" ----checkAction1---- "+password);// 输出正则匹配结果

        }

        /**
         * 前端正则检验密码
         * 规则合并写
         */
        function checkAction2(password){
            // (?![0-9A-Za-z]+$)意思是不能是纯大写字母的密码,也不能是纯小写字母的密码,也不能是纯数字的密码,也不能是由大写字母和小写字母和数字组合的密码。
            // (?![-`=\[\];',.~!@#$%^&*()_+|{
    
    }:"?]+$)意思是不能是指定的纯特殊字符的密码。
            // (?![0-9-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)意思是不能是由指定的纯特殊字符和数字组合的密码。
            // (?![A-Za-z-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)意思是不能是由指定的纯特殊字符和大写字母和小写字母组合的密码。
            // [0-9a-zA-Z-`=\[\];',.~!@#$%^&*()_+|{}:"?]意思是定义字符范围,注意此不包括\s空格字符。
            // {8,16}意思是定义密码匹配的长度。
            var regex = /^(?![0-9A-Za-z]+$)(?![-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)(?![0-9-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)(?![A-Za-z-`=\[\];',.~!@#$%^&*()_+|{}:"?]+$)[0-9a-zA-Z-`=\[\];',.~!@#$%^&*()_+|{}:"?]{8,16}$/;
            var test = regex.test(password);
            console.log(test+" ----checkAction2---- "+password);//输出正则匹配结果
        }

        /**
         * JS实现ArrayList
         */
        function ArrayList(){
    
    
              this.arr=[],
              this.size=function(){
    
    
                  return this.arr.length;
              },
              this.add=function(){
    
    
                  if(arguments.length==1){
    
    
                      this.arr.push(arguments[0]);
                  }else if(arguments.length>=2){
    
    
                      var deleteItem=this.arr[arguments[0]];
                      this.arr.splice(arguments[0],1,arguments[1],deleteItem)
                  }
                  return this;
              },
              this.get=function(index){
    
    
                  return this.arr[index];
              },
              this.removeIndex=function(index){
    
    
                  this.arr.splice(index,1);
              },
              this.removeObj=function(obj){
    
    
                  this.removeIndex(this.indexOf(obj));
              },
              this.indexOf=function(obj){
    
    
                  for(var i=0;i<this.arr.length;i++){
    
    
                      if (this.arr[i]===obj) {
    
    
                          return i;
                      };
                  }
                  return -1;
              },
              this.isEmpty=function(){
    
    
                  return this.arr.length==0;
              },
              this.clear=function(){
    
    
                  this.arr=[];
              },
              this.contains=function(obj){
    
    
                  return this.indexOf(obj)!=-1;
              } 
        };
    </script>
</body>
</html>

方式一和方式二实现效果:

index.html:66 false ----checkAction1----     7613Ss&&&
index.html:83 false ----checkAction2----     7613Ss&&& 

index.html:66 false ----checkAction1----     7613AA&&&
index.html:83 false ----checkAction2----     7613AA&&& 

index.html:66 false ----checkAction1----     7613aa&&&
index.html:83 false ----checkAction2----     7613aa&&& 

index.html:66 false ----checkAction1----     7613&&&
index.html:83 false ----checkAction2----     7613&&& 

index.html:66 false ----checkAction1----            
index.html:83 false ----checkAction2----             

index.html:66 false ----checkAction1---- 123761123&&&
index.html:83 false ----checkAction2---- 123761123&&& 

index.html:66 true ----checkAction1---- aaabbb&&&1
index.html:83 true ----checkAction2---- aaabbb&&&1 

index.html:66 false ----checkAction1---- aaabbb&&&
index.html:83 false ----checkAction2---- aaabbb&&& 

index.html:66 false ----checkAction1---- 1234567a
index.html:83 false ----checkAction2---- 1234567a 

index.html:66 true ----checkAction1---- 123AoA()$
index.html:83 true ----checkAction2---- 123AoA()$ 

index.html:66 true ----checkAction1---- 123aOa$-
index.html:83 true ----checkAction2---- 123aOa$- 

index.html:66 true ----checkAction1---- 123AoA$-
index.html:83 true ----checkAction2---- 123AoA$- 

index.html:66 true ----checkAction1---- 123789a$
index.html:83 true ----checkAction2---- 123789a$ 

index.html:66 true ----checkAction1---- 123789A$
index.html:83 true ----checkAction2---- 123789A$ 

index.html:66 false ----checkAction1---- 123aO a$
index.html:83 false ----checkAction2---- 123aO a$ 

index.html:66 false ----checkAction1---- 123Ao A$
index.html:83 false ----checkAction2---- 123Ao A$ 

index.html:66 false ----checkAction1---- 123789a $
index.html:83 false ----checkAction2---- 123789a $ 

index.html:66 false ----checkAction1---- 123789A $
index.html:83 false ----checkAction2---- 123789A $ 

index.html:66 false ----checkAction1---- 123789AoA
index.html:83 false ----checkAction2---- 123789AoA 

index.html:66 false ----checkAction1---- 123789aOa
index.html:83 false ----checkAction2---- 123789aOa 

index.html:66 false ----checkAction1---- 123A
index.html:83 false ----checkAction2---- 123A 

index.html:66 false ----checkAction1---- 123a
index.html:83 false ----checkAction2---- 123a 

index.html:66 false ----checkAction1---- AAA
index.html:83 false ----checkAction2---- AAA 

index.html:66 false ----checkAction1---- aaa
index.html:83 false ----checkAction2---- aaa 

index.html:66 false ----checkAction1---- 123
index.html:83 false ----checkAction2---- 123

方式三实现如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>前端JS正则校验密码</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-1.10.2.js"></script>
    <style type="text/css">.ok{
    
    color:lightgreen;}.no{
    
    color:red;}.tip p {
    
    color: #0c79ba;}</style>
</head>
<body>
    <div class="tip">
        <div>
            <p><b>登录密码需满足如下要求:</b><p />
            <p>需要包含小写字母a...z或者大写字母A...Z <span class="upperCaseOrlowerCase" /></p>
            <p>需要包含数字0...9 <span class="number" /></p>
            <p>需要包含至少一位如下特殊字符-`=[];',.~!@#$%^&*()_+|{}:"? <span class="specificSymbol" /></p>
            <p>密码长度需要在8-16位之间 <span class="length" /></p>
            <p>两次设置的登录密码保持一致 <span class="confirmPassword" /></p>
        </div>
    </div>

    <div class="form">
        <p>
            <input placeholder="旧密码不能为空!" id="OldPassword" name="OldPassword" type="password" />
        </p>
        <p>
            <input placeholder="新密码不能为空!" id="Password" name="Password" type="password" />
        </p>
        <p>
            <input placeholder="确认密码不能为空!" id="ConfirmPassword" name="ConfirmPassword" type="password" />
        </p>
        <p>
            <input type="button" value="确定" onclick="ChangePassword()" />
        </p>
    </div>

    <script type="text/javascript">
        function keyUp(e) {
    
    
            // var currKey=0,e=e||event;
            // currKey=e.keyCode||e.which||e.charCode;
            // var keyName = String.fromCharCode(currKey);
            // console.log("按键码: " + currKey + " 字符: " + keyName);
            var input = $("#Password").val();
            var eq = $("#ConfirmPassword").val() == input;
            if (/^.*[A-Za-z]{1,}.*$/.test(input)) {
    
    
                $(".upperCaseOrlowerCase").html("<span class='ok'>OK</span>");
            } else {
    
    
                $(".upperCaseOrlowerCase").html("<span class='no'>NO</span>");
            }

            if (/^.*[0-9]{1,}.*$/.test(input)) {
    
    
                $(".number").html("<span class='ok'>OK</span>");
            } else {
    
    
                $(".number").html("<span class='no'>NO</span>");
            }

            if (/^.*[-`=\[\];',\.~!@@#\$%\^&\*\(\)_\+\|\{\}:\"\?]{1,}.*$/.test(input)) {
                $(".specificSymbol").html("<span class='ok'>OK</span>");
            } else {
                $(".specificSymbol").html("<span class='no'>NO</span>");
            }

            if (input.length >= 8 && input.length <= 16) {
                $(".length").html("<span class='ok'>OK</span>");
            } else {
                $(".length").html("<span class='no'>NO</span>");
            }

            if (!!input && eq) {
                $(".confirmPassword").html("<span class='ok'>OK</span>");
            } else {
                $(".confirmPassword").html("<span class='no'>NO</span>");
            }
        }

        function keyUpConfirmPassword(e) {
            var input = $("#Password").val();
            var eq = $("#ConfirmPassword").val() == input;
            if (!!input && eq) {
                $(".confirmPassword").html("<span class='ok'>OK</span>");
            } else {
                $(".confirmPassword").html("<span class='no'>NO</span>");
            }
        }

        document.getElementById("Password").onkeyup = keyUp;
        document.getElementById("ConfirmPassword").onkeyup = keyUpConfirmPassword;

        function ChangePassword() {
            var oldPassword = $("#OldPassword").val();
            var password = $("#Password").val();
            var confirmPassword = $("#ConfirmPassword").val();
            var message = "";

            if (password != confirmPassword && password != "") {
                message = message + "两次输入的密码不相符,请重新输入密码!<br/>";
                $("#ConfirmPassword").focus();
            }
            if (!(password.length >= 8 && password.length <= 16)) {
                message = "密码长度需要在8-16位之间!<br/>";
                $("#Password").focus();
            }
            if (!(/^.*[-`=\[\];',\.~!@#\$%\^&\*\(\)_\+\|\{
    
    \}:\"\?]{
    
    1,}.*$/.test(password))) {
    
    
                message = "需要包含至少一位如下特殊字符-`=[];',.~!@#$%^&*()_+|{}:\"?!<br/>";
                $("#Password").focus();
            }
            if (!(/^.*[0-9]{1,}.*$/.test(password))) {
    
    
                message = "需要包含数字0...9!<br/>";
                $("#Password").focus();
            }
            if (!(/^.*[A-Za-z]{1,}.*$/.test(password))) {
    
    
                message = "需要包含小写字母a...z或者大写字母A...Z!<br/>";
                $("#Password").focus();
            }
            if (password.trim() == "") {
    
    
                message = "密码不能为空,请输入密码!<br/>";
                $("#Password").focus();
            }
            if (oldPassword.trim() == "") {
    
    
                message = "请输入旧密码!<br/>";
                $("#OldPassword").focus();
            }

            if (message != "")
            {
    
    
                alert(message);
                return false;
            }
        }
    </script>
</body>
</html>

方式三实现效果:

目录
相关文章
|
13天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
14天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
30 4
|
24天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
24天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
30 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
29天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
40 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
28 1
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
30 1
|
2月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
26 3
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
164 0