`

JS要来自动判断密码的安全强度

阅读更多

先看效果

 

代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用于判断密码的安全强度</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">

	//CharMode函数 
	//测试某个字符是属于哪一类. 
	function CharMode(iN){ 
		if (iN>=48 && iN <=57) //数字 
		return 1; 
		if (iN>=65 && iN <=90) //大写字母 
		return 2; 
		if (iN>=97 && iN <=122) //小写 
		return 4; 
		else 
		return 8; //特殊字符 
	} 

	//bitTotal函数 
	//计算出当前密码当中一共有多少种模式 
	function bitTotal(num){ 
		modes=0; 
		for (i=0;i<4;i++){ 
		if (num & 1) modes++; 
		num>>>=1; 
		} 
		return modes; 
	} 

	//checkStrong函数 
	//返回密码的强度级别 

	function checkStrong(sPW){ 
		if (sPW.length<=4) 
		return 0; //密码太短 
		Modes=0; 
		for (i=0;i<sPW.length;i++){ 
		//测试每一个字符的类别并统计一共有多少种模式. 
		Modes|=CharMode(sPW.charCodeAt(i)); 
		} 
	
		return bitTotal(Modes); 
	} 

	//pwStrength函数 
	//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 

	function pwStrength(pwd){ 
		O_color="#eeeeee"; 
		L_color="#FF4040"; 
		M_color="#FF9900"; 
		H_color="#33CC00"; 
		if (pwd==null||pwd==''){ 
		Lcolor=Mcolor=Hcolor=O_color; 
		} 
		else{ 
			S_level=checkStrong(pwd); 
			switch(S_level) { 
			case 0: 
			Lcolor=Mcolor=Hcolor=O_color; 
			case 1: 
			Lcolor=L_color; 
			Mcolor=Hcolor=O_color; 
			break; 
			case 2: 
			Lcolor=Mcolor=M_color; 
			Hcolor=O_color; 
			break; 
			default: 
			Lcolor=Mcolor=Hcolor=H_color; 
			} 
		} 

		document.getElementById("strength_L").style.background=Lcolor; 
		document.getElementById("strength_M").style.background=Mcolor; 
		document.getElementById("strength_H").style.background=Hcolor; 
		return; 
	} 	
	
	</script>

  </head>
  
  <body>
   	<table>
   		<tr id ="tr_Password2">
          <td height="30" align="right" >密码:</td>
          <td>
          <input type="password" name="password" class="input1" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)">
          <font color="red">*</font>
          </td>
        </tr>
        <tr id ="tr_ConfirmPassword2">
          <td height="30" align="right" >确认密码:</td>
          <td><input type="password" name="passCf" class="input1">
          <font color="red">*</font>
          </td>
        </tr>
        <tr>
        	<td align="right">密码强度:</td>
        	<td>
				<table  border="1" cellspacing="0" cellpadding="1" height="20" style="border-color: #5b5b5b;"> 
				<tr align="center" bgcolor="#eeeeee"> 
					<td width="33%" id="strength_L">弱</td> 
					<td width="33%" id="strength_M">中</td> 
					<td width="33%" id="strength_H">安全</td> 
				</tr> 
				</table>        	
        	</td>
        </tr> 
   	</table>
  </body>
</html>
 

  • 大小: 2 KB
分享到:
评论

相关推荐

    javascript 代码自动判断文本框中的密码强度

    本篇文章将深入探讨如何使用JavaScript来实现对文本框中输入的密码强度进行自动判断。 首先,我们需要理解什么是密码强度。一个强密码通常包含以下特点:长度足够(至少8个字符),包含大写字母、小写字母、数字...

    密码强弱判断

    jQueryPassword是一个JavaScript库,专门用于实现这种密码强度检测功能。它与流行的jQuery库集成,提供了一种简单的方法来添加密码强度指示器到网页中。该库通常会监听用户的输入,根据密码内容动态更新强度指示器的...

    基于JQuery的密码强度验证代码

    每次计算都会为得分增加相应的分数,最终根据得分判断密码强度,并返回对应的提示信息。 开发者在使用这个密码强度验证控件时,可以通过修改和扩展插件的默认选项来适应不同的场景和需求。例如,可以自定义提示文本...

    js登录注册手机号验证判断密码难度,密码一致,随机验证码,和一致等

    以下是一些关于"js登录注册手机号验证判断密码难度,密码一致,随机验证码,和一致等"相关知识点的详细说明: 1. 手机号验证: 在中国,手机号通常用于身份验证,因为它们更为独特且便于记忆。验证手机号通常通过...

    用于显示iOS、Android和Expo工作流程的密码强度的.zip

    3. **规则定制**:开发者可以根据应用需求自定义判断密码强度的规则,比如最小长度、是否包含数字、特殊字符等。 4. **错误提示**:对于不符合安全标准的密码,组件可以提供提示信息,指导用户改进。 5. **API集成**...

    javascript实现较全功能注册表单

    这个过程可以通过判断密码的长度、是否包含数字、字母大小写以及特殊字符来实现。密码强度提示一般分为几个级别,如弱、中、强,并以相应的图标向用户显示。 4. **正则表达式**:正则表达式在验证用户输入时起着...

    js验证Validator,我是佛山人

    **JavaScript验证**在Web开发中扮演着重要角色,主要用于确保用户在表单中输入的数据符合特定格式或规则,例如检查邮箱格式、手机号码合法性、密码强度等。在没有服务器端验证的情况下,JavaScript验证能提供即时...

    jQuery+HTML5实现的随机密码生成器特效源码.zip

    3. **密码强度评估**:可能有一个函数来判断生成的密码是否满足特定强度标准,如包含大写字母、小写字母、数字和特殊字符等。 此外,考虑到安全性,源代码可能还涉及到: 1. **密码复杂度检查**:确保生成的密码不...

    程序天下:JavaScript实例自学手册

    16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条...

    《程序天下:JavaScript实例自学手册》光盘源码

    16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条...

    表单判断即弹出窗口,即无限下拉列表

    这通常用于确保数据的准确性和完整性,比如检查邮箱格式、手机号码合法性、密码强度等。表单判断可以分为前端验证(客户端)和后端验证(服务器端)。前端验证提供了快速的反馈,防止无效数据提交到服务器,提高了...

    万能通用智能JS表单验证

    6. **自定义验证**:对于更复杂的需求,开发者可以编写自定义函数来进行验证,比如检查密码强度、验证密码是否与确认密码一致等。 万能通用智能JS表单验证的亮点在于其“智能”和“万能”特性: - **智能**:该...

    jquery-passmeter:PassMeter是一个简单的jquery插件,在调用时将显示密码强度表

    3. **自定义规则**:开发者可以根据项目需求定制密码强度的判断规则,比如要求包含数字、大写字母、小写字母、特殊字符等。 4. **用户友好**:提供直观的视觉提示,使用户能够快速理解如何提高密码强度。 ### 使用...

    JavaScript在线培训

    最后,“新用户注册”环节,JavaScript可以处理表单验证,比如检查输入的有效性(如邮箱格式、密码强度等),并实时给出反馈,减少服务器端的压力,提高用户体验。 在“JavaScript在线培训”中,我们将学习如何编写...

    健身网站前台html+css+js.zip

    “判断注册”指的是在用户注册过程中进行验证,这通常涉及JavaScript的函数,用于检查用户输入的邮箱地址是否合法,密码是否符合强度要求等。这一步骤有助于防止无效数据的提交,提高数据库的清洁度。 “有注册有...

    JavaScript特效经典例子

    5. **表单验证**:JavaScript可以实时验证用户在表单中输入的数据,如检查邮箱格式、密码强度、必填项等,防止无效数据提交到服务器。 6. **拖放功能**:利用HTML5的拖放API,JavaScript可以实现用户友好的拖放功能...

    javascript客户端验证和页面特效制作

    - 检查密码强度。 ##### 三、表单的验证思路 1. 获取表单元素的值。 2. 使用条件判断进行验证。 3. 如果验证失败,则显示错误消息。 ##### 四、文本框控件 - 使用 `document.getElementById` 获取文本框元素。 - ...

    JavaScript特效

    可以验证邮箱格式、手机号码、密码强度等,提高用户体验。使用`event.preventDefault()`防止表单默认提交,然后编写自定义验证逻辑。 6. **时间日期处理**:JavaScript提供了内置的Date对象,可以用于处理时间日期...

    Web注册信息脚本验证

    这通常通过判断输入框的值是否为空来实现。 4. **长度验证**:限制输入字段的字符数量,比如密码强度要求至少8位,用户名不能超过20个字符。可以使用JavaScript的字符串长度属性`length`进行验证。 5. **格式验证*...

    password-generator

    为了提高用户体验,密码生成器还可能包含一些交互元素,如强度指示器(通过计算密码的熵值来显示强度等级)、复制到剪贴板的功能(利用 `navigator.clipboard.writeText()` API)以及自定义选项(如是否包含特殊字符...

Global site tag (gtag.js) - Google Analytics