<html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 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; } //返回强度级别 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); } //显示颜色 function pwStrength(pwd){ O_color="#eeeeee"; L_color="#FF0000"; 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> <form name=form1 action="" > 密码:<input type=password size=8 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)> <br>密码强度: <table width="210" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22" style='display:inline'> <tr align="center" bgcolor="#f5f5f5"> <td width="33%" id="strength_L">弱</td> <td width="33%" id="strength_M">中</td> <td width="33%" id="strength_H">强</td> </tr> </table> </form> </body> <html>
时间: 2023-05-30 09:04:57 浏览: 107
这段代码是用JavaScript语言编写的,用于判断密码的强度。函数CharMode用于判断密码中包含的字符类型,包括数字、小写字母、大写字母和特殊字符。函数bitTotal用于计算密码强度值。在HTML页面中引入了这段JavaScript代码,可以通过调用函数判断密码的强度。
相关问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"%> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> </script> </body> </html>
这是一个JSP页面,包含HTML、Java、JavaScript等多种语言。其中,第一行指定了JSP页面的语言类型为Java,同时设置了页面的编码格式为UTF-8。第二行是引入了另一个JSP页面"mytags.jsp"。接下来是HTML的部分,包含了一个空的标题和一个空的body。在body中,定义了一个JavaScript代码块。该代码块目前为空,可以用于实现一些前端逻辑。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
这段代码有一些问题,我来逐个指出并提供改进的方案:
1. 没有为表单元素设置name属性,导致表单提交时无法获取表单数据。因此,需要给每一个表单元素都设置name属性,例如:
```html
<input type="text" name="name">
```
2. 在性别选项中,使用了一个嵌套的form元素,这是不合法的HTML结构。应该将性别选项用label元素包裹,并为每个选项设置id属性,然后在label元素中使用for属性指向该选项的id,例如:
```html
<label for="male"><input type="radio" id="male" name="gender" value="男">男</label>
<label for="female"><input type="radio" id="female" name="gender" value="女">女</label>
```
3. select元素没有设置name属性,也无法选择默认选项。应该给select元素设置name属性,并在其中加入一个默认选项(可以使用disabled和selected属性来禁止该选项被选中),例如:
```html
<select name="language">
<option disabled selected>请选择语言</option>
<option>HTML</option>
<option>CSS</option>
<option>jquery</option>
<option>javascript</option>
<option>vue.js</option>
</select>
```
4. input元素的id属性应该为小写字母。
下面是改进后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信息填写</title>
<script>
window.onload = function() {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
alert("提交成功");
};
}
</script>
</head>
<body>
<h1>信息填写</h1>
<form method="post">
姓名:<input type="text" name="name"><br>
<br>
账号:<input type="text" name="account"><br>
<br>
密码:<input type="password" name="password"><br>
<br>
<label for="male"><input type="radio" id="male" name="gender" value="男">男</label>
<label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br>
<br>
<select name="language">
<option disabled selected>请选择语言</option>
<option>HTML</option>
<option>CSS</option>
<option>jquery</option>
<option>javascript</option>
<option>vue.js</option>
</select><br>
<br>
<input id="btn" type="button" value="提交">
</form>
</body>
</html>
```