做企业网站需要哪些材料,摄影的网站设计特点,网页制作的软件有哪些,搜索关键词查询使用HTML,CSS及JS实现注册功能中密码强度的显示#xff0c;根据输入的密码判断并显示用户输入密码的强度等级是高还是低等。 效果演示 代码演示 html内容 div classcontainerdiv classuserName-wrapperlabel foruserN…使用HTML,CSS及JS实现注册功能中密码强度的显示根据输入的密码判断并显示用户输入密码的强度等级是高还是低等。 效果演示 代码演示 html内容 div classcontainerdiv classuserName-wrapperlabel foruserName账户:/labelinput typetext iduserNamespan classunmInfoi classwarn/i/span/divdiv classcount/divdiv classpassWord-wrapperlabel forpsd密码:/labelinput typepassword idpsdspan classpsdInfo/span/divdiv classstrongp classflspan classhover弱/spanspan class中/spanspan class强/span/p/divdiv classpassWord1-wrapperlabel forpsd1确认密码:/labelinput typepassword idpsd1 disabledspan classpsd1Info/span/divdiv classbtn-wrapperinput typebutton classbtn value注册/div/divcss内容 style.container{width:1200px;margin:200px auto;}.containerdiv{margin-bottom:6px;}input{display: inline-block;border:0;padding:0;margin:0;}#userName,#psd,#psd1{width:260px;height:34px;border:1px solid #ccc;padding:0 10px;font-size: 18px;color:#ccc;outline: none}.count{height:16px;line-height: 16px;font-size: 14px;color:#ccc;visibility: hidden;padding-left:160px;}label{display:inline-block;width:150px;text-align: right}.btn{display: inline-block;width:120px;height:40px;text-align:center;font-size:16px;line-height: 40px;background: #e4393c;color:#fff;margin-left:160px;border-radius: 10px;}.strong p{margin-left: 158px;font-size: 0;}.strong p span{display: inline-block;font-weight: normal;font-style: normal;padding:0;margin:0;width:94px;height:20px;background: #f9d194;font-size: 13px;color:#fff;text-align: center;line-height: 20px;}.strong p span.hover{background: #f97101;}.strong p.active span:nth-child(2){background: #f97101;}.strong p.active1 span{background: #f97101;}.unmInfo{display: none;font-size: 14px;color:#888;}.warn{display: inline-block;width:22px;height:22px;background: url(image/warn.png);background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.right{display: inline-block;width:22px;height:22px;background: url(image/right.png);background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.cuo{display: inline-block;width:22px;height:22px;background: url(image/cuo.png);background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.psdInfo{display: none;font-size: 14px;color:#888;}.psd1Info{display: none;font-size: 14px;color:#888;}.btn-wrapper{margin-top: 15px;}/stylejs内容 scriptfunction findStr(str, n) {var temp 0;for (var i 0; i str.length; i) {if (str.charAt(i) n) {temp;};};return temp;};window.onload function() {var userName document.getElementById(userName);var psd document.getElementById(psd);var psd1 document.getElementById(psd1);var unmInfo document.getElementsByClassName(unmInfo)[0];var count document.getElementsByClassName(count)[0];var psdInfo document.getElementsByClassName(psdInfo)[0];var psd1Info document.getElementsByClassName(psd1Info)[0];var fl document.getElementsByClassName(fl)[0];var name_length 0;var reg /[^\w\u4e00-\u9fa5]/g;var re_n /[^\d]/g;var re_t /[^a-zA-Z]/guserName.onfocus function() {unmInfo.style.display inline-block;unmInfo.innerHTML i classwarn/i 5-25个字符一个汉字两个字符推荐使用中文会员名。}userName.onkeyup function() {count.style.visibility visible;name_length getLength(this.value);count.innerHTML name_length 个字符;if (name_length 0) {count.style.visibility hidden;}}userName.onblur function() {if (reg.test(this.value)) {unmInfo.innerHTML i classcuo/i含有非法字符;} else if (this.value ) {unmInfo.innerHTML i classcuo/i不能为空;} else if (name_length 25) {unmInfo.innerHTML i classcuo/i长度超过25个字符;} else if (name_length 6) {unmInfo.innerHTML i classcuo/i长度少于6个字符;} else {unmInfo.innerHTML i classright/iOK!;}}psd.onfocus function() {psdInfo.style.display inline-block;psdInfo.innerHTML i classwarn/i 6-16个字符请使用字母加数字或者符号不能单独使用字母 数字或者字符。;}psd.onkeyup function() {if (this.value.length 5) {fl.className active;psd1.removeAttribute(disabled);psd1Info.style.display inline-block;psd1Info.innerHTML i classwarn/i 再输入一次;} else {fl.className ;psd1.setAttribute(disabled, disabled);psd1Info.style.display none;psd1.value ;}if (this.value.length 10) {fl.className active1;} else {fl.className ;psd1.value ;}}psd.onblur function() {var m findStr(this.value, this.value[0]);if (this.value ) {psdInfo.innerHTML i classcuo/i 不能为空;} else if (m this.value.length) {console.log(1);psdInfo.innerHTML i classcuo/i 不能有相同字符;} else if (this.value.length 6 || this.value.length 16) {psdInfo.innerHTML i classcuo/i 长度应为6-16个字符;} else if (!re_n.test(this.value)) {psdInfo.innerHTML i classcuo/i 不能全为数字;} else if (!re_t.test(this.value)) {psdInfo.innerHTML i classcuo/i 不能全为字母;} else {psdInfo.innerHTML i classright/i OK;}}psd1.onblur function() {if (this.value ! psd.value) {psd1Info.innerHTML i classcuo/i 两次输入的密码不一致;} else {psd1Info.innerHTML i classright/i OK;}}}function getLength(str) {return str.replace(/[^\x00-xff]/g, xx).length;}/script了解更多关注我哟