AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-15 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章展示了三种使用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>

方式三实现效果：

文章标签：
数据安全/隐私保护
JavaScript
前端开发
关键词：
JavaScript密码
前端js
前端JavaScript密码
前端密码
JavaScript校验
Yaiba123
目录
相关文章
余生H想飞的雪糕
|
5天前
|
前端开发 机器人 API
前端大模型入门（一）：用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型（LLM）的HTTP API流式调用机制及其在前端的实现方法。通过流式调用，服务器可以逐步发送生成的文本内容，前端则实时处理并展示这些数据块，从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误，以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景，能够显著减少用户的等待时间，增强交互性。
余生H想飞的雪糕
50 2
你都不懂
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
17 0
G0518
|
6天前
|
JavaScript 前端开发 API
Vue.js：现代前端开发的强大框架
【10月更文挑战第11天】Vue.js：现代前端开发的强大框架
G0518
58 41
源码星辰
|
18小时前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript（简称JS）是一种广泛使用的脚本语言，特别在前端开发领域，它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用（SPA），JavaScript都扮演着不可或缺的角色。
源码星辰
10 3
余生H想飞的雪糕
|
3天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
余生H想飞的雪糕
10 1
邹荣乐
|
4天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
邹荣乐
35 0
游客zi3qmblbcdexu
|
5天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
游客zi3qmblbcdexu
15 0
游客zi3qmblbcdexu
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
游客zi3qmblbcdexu
7 0
你都不懂
|
5天前
|
Web App开发 JavaScript 前端开发
对于 前端 解释下 node.js的必要性
对于 前端 解释下 node.js的必要性
你都不懂
7 0
G0518
|
6天前
|
监控 JavaScript 前端开发
深入了解Vue.js：构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js：构建现代前端应用的利器
G0518
10 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    [IE&FireFox兼容]JS对select操作
  • 3
    【沫沫金】最简单的修改地址栏浏览器地址方法（JS）
  • 4
    Javascript 返回上一页并刷新
  • 5
    JS中的DOM
  • 6
    《你不知道的JavaScript》整理（三）——对象
  • 7
    dojo Quick Start/dojo入门手册--开始使用dojo.js
  • 8
    Lazyr.js – 延迟加载图片（Lazy Loading）
  • 9
    javascript语言扩展:可迭代对象（2）
  • 10
    JavaScript由入门到精通（一）——JavaScript介绍
  • 1
    PHP医院安全不良事件管理系统源码（AEMS）前端vue2+element+后端laravel8不良事件上报与闭环管理
    72
  • 2
    前端基础知识
    49
  • 3
    BoostCompass( http_server 模块 | 项目前端代码 )
    59
  • 4
    java测试链接超时返回前端
    51
  • 5
    深入理解前端开发：从基础到实践
    74
  • 6
    快照测试在前端自动化测试中的应用
    47
  • 7
    前端自动化测试中的快照测试原理
    85
  • 8
    前端自动化测试
    161
  • 9
    新一代前端框架：革命性的Web开发利器
    62
  • 10
    如何优化前端网页加载速度
    75

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础1：前端开发环境的安装和配置
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片