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

最新推荐文章于 2024-07-17 15:59:17 发布
最新推荐文章于 2024-07-17 15:59:17 发布
阅读量7k 收藏 21
点赞数 1
分类专栏： 前端大杂烩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cai181191/article/details/107930043
版权

匹配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>

方式三实现效果：

Yaiba123
关注
专栏目录
前端常用正则校验
chanzhiliao的博客
09-19 2176
一、校验数字的表达式 数字：1$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9])$ 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$ 正数、负数、和小数：^(-|+)?\d+(.\d+)?$ 有两位小数的正实数：2+(.[0-9]{2})?$ 有1~3位小数的正实数：3+(.[0-9]{1,3})
前端对用户密码的校验js
盼涧
12-06 1105
密码校验-正则、js
JS的常用正则表达式 验证密码
热门推荐
x_i_y_u_e的专栏
08-17 3万+
JS的正则表达式强：字母+数字+特殊字符   ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$          中：字母+数字，
【前端】表单密码格式—校验。
最新发布
棒怡情的专栏
07-17 342
pc端，实现表单校验—新密码和确认密码的校验
js正则校验密码的一些正则
qq_41838435的博客
01-17 1132
1、包含大写字母、小写字母、数字、字符串，密码长度不少于8位。3、包含字母、数字、字符串任意两种，密码长度不少于8位。2、 包含字母、数字、字符串，密码长度不少于8位。
前端密码校验8位以上，包含大写字母、小写字母、数字、特殊符号中的 3 种以上
你怎么也喜欢嘴巴嘟嘟
02-23 2862
【代码】前端密码校验8位以上，包含大写字母、小写字母、数字、特殊符号中的 3 种以上。
js正则表达式验证密码强度【推荐】
10-20
在实现密码强度验证的过程中，我们通常需要满足一些基本的要求，比如密码长度，是否包含字母、数字以及特殊字符等。具体而言，下面的几个点是本文所涉及的关键知识点： 1. 正则表达式基础：正则表达式是进行文本...
Javascript校验密码复杂度的正则表达式
10-21
在JavaScript中，正则表达式是实现密码校验规则的有力工具。正则表达式能够帮助我们检查密码是否符合一系列预设的规则，比如是否包含数字、大小写字母以及特殊符号，并且可以限制密码的长度范围。 首先，我们先来看...
利用js正则表达式校验正数、负数、和小数
10-20
本文提供了如何利用JavaScript正则表达式校验正数、负数和小数的详细方法和代码实例。开发者可以将这些方法应用于实际项目中，以提高数据的准确性并提升用户体验。同时，文末的提示和交流意愿也鼓励了社区的互动和...
银行卡号正则校验js工具类
06-11
银行卡号正则校验js工具类
JS正则表达式验证密码强度
10-15
主要为大家详细介绍了JS正则表达式验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）
12-09
前言： 密码强度是一个很普遍的功能，比较简单，主要是怎么制定这个强度规则。现在需要升级密码强度的验证，以前的验证比较简单，现在已经不能满足需求了，现在需要可灵活变化并有多级别可配置选择的一个密码强度验证，所以就设计了下面这个东东。在设计前也参考了下比较成熟的强度规则，大同小异，不外乎都采取了打分的机制来控制密码强度规则，这样可配置性高，灵活。本来想直接拿来用的，但是发现都比较旧，有些不太适宜公司开发的需求，可能这个东西比较简单吧，所以也没什么人去更新和写新的代码，所以还是自己动手设计了规则和写了代码。 实现： 　　原理： 　　采用打分的机制，打分分为3类（基础分、加分、减分），先求出基础分，在
前端密码校验逻辑笔记
ajsbxi的博客
05-11 302
在这个登录组件中，我们实现了对用户输入密码的实时验证，以确保密码的安全性和一致性
js正则表达式密码校验
q12as的博客
11-30 1835
包含八十多个正则表达式，前端开发绝大部分需要的正则表达式都包含。密码必须包含数字，特殊字符，小写字母，大写字母其中三项。分享一个vsCode小插件any-rule。
【前端】正则表达式验证密码
JellyFishDing的博客
08-19 3178
技术栈: vue-cli + element ui 验证规则： 至少有六个字符长 包含以下四类字符中的三类字符: 英文大写字母(A 到 Z) 英文小写字母(a 到 z) 10 个基本数字(0 到 9) 非字母字符(例如 !、$、#、%) 代码： function validatePass(rule, value, callback) { //是否包含数字 var ptr_digi...
前端校验用户登录密码复杂度（长度8-30，必须包含数字、字母、特殊符号）
@Juneberry的博客
12-29 1529
在前端进行用户登录密码复杂度的校验是一种常见的安全实践。你可以通过 JavaScript 来实现这样的校验。你可以根据具体需求，调整正则表达式中的规则。这段代码可以集成到你的注册或修改密码的表单中，用于在用户输入密码时进行实时校验或在提交表单前进行校验。函数接受一个密码作为参数，使用正则表达式来判断密码是否符合规定的复杂度。：长度8-30，必须包含数字、字母、特殊符号。
js正则密码校验
yr123456654321的博客
08-31 1174
无
前端如何校验密码的强度。Naive UI
weixin_59691605的博客
08-10 773
前端如何校验密码的强度
JS的常用正则表达式 验证密码（转载自用）
dengla6847的博客
12-22 213
JS的正则表达式 强：字母+数字+特殊字符&nbsp; &nbsp;^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$ &nbsp;&amp...
前端input框如何实现正则校验
05-31
前端input框可以通过以下步骤实现正则校验： 1. 给input框添加一个监听事件，例如监听input的change或者blur事件。 2. 在监听事件中获取input框输入的值。 3. 使用正则表达式对输入值进行校验。 4. 如果输入值符合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值