Jquery 注册验证

最新推荐文章于 2022-11-22 10:34:00 发布

咸鱼(已沉底)

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量490

点赞数

文章标签： ajax jquery 注册验证

本文链接：https://blog.csdn.net/SheeranX/article/details/70175850

版权

本文介绍如何使用JQuery和Bootstrap实现密码强度验证及视觉反馈。通过正则表达式检查密码复杂度，并利用Bootstrap进度条展示不同级别的密码强度：弱、中、强。此外，还介绍了输入框聚焦和失焦时的验证提示。

摘要由CSDN通过智能技术生成

Jquery + bootstrap 注册验证

效果图

Jquery 里用到的方法

1. Blur(); Focus(); AddClass(); removeClass();

$(pwd).keyup(function(){//验证密码强度的， 用bootstrap 进度条 ， 效果妥妥的
		var strongRegex = new RegExp("^(?=.{8,20})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,20})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,20}).*", "g");

		if ($(pwd).val()==null||$(pwd).val()==""||$(pwd).val().length<6) {
			//$(pwd_info).html("<font color=red size=2><span class='glyphicon glyphicon-minus-sign'></span> 请使用六位及以上密码,密码不能为空</font>");
				$(".progress-bar-danger").css("width","0%");	
				$(".progress-bar-warning").css("width","0%");
				$(".progress-bar-success").css("width","0%");
		}else{
			if (false == enoughRegex.test($(this).val())) {
				$(".progress-bar-danger").css("width","0%");	
				$(".progress-bar-warning").css("width","0%");
				$(".progress-bar-success").css("width","0%");
			}else if(strongRegex.test($(pwd).val())){
			 	$(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码安全度（高）</font>");
				$(".progress-bar-danger").css("width","33%");	
				$(".progress-bar-warning").css("width","34%");
				$(".progress-bar-success").css("width","33%");
			}else if(mediumRegex.test($(pwd).val())){
				$(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码安全度（中）</font>");
				$(".progress-bar-danger").css("width","33%");
				$(".progress-bar-warning").css("width","34%");
				$(".progress-bar-success").css("width","0%");
			}else{
				$(pwd_info).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> 密码有被盗风险，建议修改密码</font>");
				$(".progress-bar-danger").css("width","33%");
				$(".progress-bar-warning").css("width","0%");
				$(".progress-bar-success").css("width","0%");

			}
		}
	  
	});

2. 验证信息部分

	$(paraInput).focus(function(){
		$(paraInfo).html("<font style='color:#ccc'><span class='glyphicon glyphicon-info-sign'></span> "+valInfo1+"</font>");
	});
	$(paraInput).blur(function(){
		if($(this).val()==""||$(this).val()==null){
			$(paraInfo).html("<font style='color:red' size=2><span class='glyphicon glyphicon-minus-sign'></span> "+varInfo3+"</font>");
		} else if (!myReg.test($(this).val())) {
		    $(paraInfo).html("<font style='color:red' size=2><span class='glyphicon glyphicon-minus-sign'></span> " + valInfo2 + "</font>");
		} else {
		    AjaxVal(paraInput, paraInfo, varinfo4, varinfo5);//Ajax 验证数据
		}
	});