实现功能:
1、输入字符要在6-16之间;小于6个字符或大于16个字符时给予提示,而且强弱不显示;为0时,也给予提示;
2、当密码在6-16个字符之间时,如果密码全是数字或全是字母,显示弱;密码是数字与字母的组合,则显示强;若为字母数字加下划线,则为强;
效果图如下:
代码如下:
001 | <!DOCTYPE html> |
002 | < html > |
003 | < head > |
004 | < meta charset = "utf-8" > |
005 | < title ></ title > |
006 | < style > |
007 | .mm-body{ |
008 | position: relative; |
009 | height: 100px; |
010 | width: 450px; |
011 | background-color: wheat; |
012 | } |
013 | .mm-top{ |
014 | height:35px; |
015 | width: 450px; |
016 | background-color: wheat; |
017 | } |
018 | .mm-sr{ |
019 | height:30px; |
020 | width: 100px; |
021 | float: left; |
022 | text-align: center; |
023 | line-height: 30px; |
024 | } |
025 | #mm-pwd{ |
026 | float: left; |
027 | height:25px; |
028 | background-color: ghostwhite; |
029 | border-radius: 5px; |
030 | width: 150px; |
031 | } |
032 | .mm-btm{ |
033 | height: 40px; |
034 | width: 140px; |
035 | position: relative; |
036 | margin-left: 110px; |
037 | } |
038 | #lv1,#lv2,#lv3{ |
039 | height: 30px; |
040 | width: 40px; |
041 | border-top: 4px solid gainsboro; |
042 | margin-left: 3px; |
043 | float: left; |
044 | font-size: 18px; |
045 | text-align: center; |
046 | line-height: 25px; |
047 | } |
048 | </ style > |
049 | </ head > |
050 | |
051 | < body > |
052 | < div class = "mm-body" > |
053 | < div class = "mm-top" > |
054 | < span class = "mm-sr" >请输入密码:</ span > |
055 | < form method = "get" action = "data.html" > |
056 | < input type = "password" id = "mm-pwd" onkeyup = "show()" /> |
057 | </ form > |
058 | < span id = "mm-pd" style = "color: red; font-size: 12px; line-height: 30px;" ></ span > |
059 | </ div > |
060 | < div class = "mm-btm" > |
061 | < div id = "lv1" >弱</ div > |
062 | < div id = "lv2" >中</ div > |
063 | < div id = "lv3" >强</ div > |
064 | |
065 | <!--强度判断也可用表格做 |
066 | <table border="0px" cellpadding="0px" cellspacing="1px" > |
067 | <tr height="20px" > |
068 | <td width="40px" id="lv1" style="border-top: 3px solid darkgrey;">弱</td> |
069 | <td width="40px" id="lv2" style="border-top: 3px solid darkgrey;">中</td> |
070 | <td width="40px" id="lv3" style="border-top: 3px solid darkgrey;">强</td> |
071 | </tr> |
072 | </table>--> |
073 | |
074 | |
075 | </ div > |
076 | </ div > |
077 | </ body > |
078 | </ html > |
079 | < script language = "JavaScript" > |
080 | function show(){ |
081 | var a=document.getElementById("mm-pwd").value; |
082 | |
083 | if(a.length==0){ |
084 | document.getElementById("mm-pd").innerHTML="密码不能为空!"; |
085 | } |
086 | else if(a.length< 6 ){ |
087 | document.getElementById("mm-pd") .innerHTML = "密码长度小于6个字符!" ; |
088 | } |
089 | |
090 | else if(a.length>=6&&a.length<=16){ |
091 | document.getElementById("mm-pd").innerHTML=""; |
092 | var reg=/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; //全是数字或全是字母 6-16个字符 |
093 | var reg1=/^[A-Za-z0-9]{6,16}$/; //数字、26个英文字母 6-16个字符 |
094 | var reg2=/^\w{6,16}$/; // 由数字、26个英文字母或者下划线组成的字符串 6-16个字符 |
095 | if(a.match(reg)){ |
096 | document.getElementById("lv1").style.borderTopColor="red"; |
097 | |
098 | } |
099 | else if(a.match(reg1)){ |
100 | document.getElementById("lv1").style.borderTopColor="red"; |
101 | document.getElementById("lv2").style.borderTopColor="yellow"; |
102 | } |
103 | else if(a.match(reg2)){ |
104 | document.getElementById("lv1").style.borderTopColor="red"; |
105 | document.getElementById("lv2").style.borderTopColor="yellow"; |
106 | document.getElementById("lv3").style.borderTopColor="green"; |
107 | } |
108 | } |
109 | |
110 | else if(a.length>16){ |
111 | document.getElementById("mm-pd").innerHTML="密码长度大于16个字符!"; |
112 | document.getElementById("lv1").style.borderTopColor="gainsboro"; |
113 | document.getElementById("lv2").style.borderTopColor="gainsboro"; |
114 | document.getElementById("lv3").style.borderTopColor="gainsboro"; |
115 | } |
116 | |
117 | } |
118 | |
119 | </ script > |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。