密码强度验证~~~
来源：3-10 作业题
七十七个七
2019-04-08 18:17:49
文字排列还是和效果图上不一样 密码的强度验证没有写出来，实在不知道怎么弄了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!-- 头部区域 -->
<header>
<div class="headermin">
<div class="logo"></div>
<h1>慕课高铁客户服务中心</h1>
<span>客户服务</span>
<p>意见反馈<a href="http://www.imooc.com">imooc@com </a>您好，请<a href="">登录</a>| 注册</p>
<div class="mine">
<a href="" class="imooc">我的IMOOC</a>
<span class="triangle"></span>
<ul class="drop-down">
<li class="menulist"><a href="">未完成订单</a></li>
<li class="menulist"><a href="">已完成订单（改/退）</a></li>
<li class="menulist"><a href="">我的保险</a></li>
<li class="menulist"><a href="">查看个人信息</a></li>
<li class="menulist"><a href="">账户安全</a></li>
<li class="menulist"><a href="">常用联系人</a></li>
<li class="menulist"><a href="">重点旅客预约</a></li>
<li class="menulist"><a href="">遗失物品查找</a></li>
<li class="menulist"><a href="">服务查询</a></li>
<li class="menulist"><a href="">投诉</a></li>
<li class="menulist"><a href="">建议</a></li>
</ul>
</div>
<div class="mobile">
<img src="img/未标题-1.png">
<span>手机版</span>
</div>
</div>
</header>
<!-- 主体区域 -->
<section>
<div class="sectionmin">
<p>您现在的位置：<a href=""> 客运首页 > </a><span>注册</span></p>
<div class="formWrap">
<div class="formTitle">账户信息</div>
<div class="formBox">
<div class="formInnerBox">
<label><span>* </span>用户名：</label>
<input type="text" name="text" id="username" placeholder="用户设置成功后不可修改">
<p class="item">6-30位字母、数字或“_”，字母开头</p>
</div>
<div class="formInnerBox">
<label><span>* </span>登录密码：</label>
<input type="password" name="password" id="password" placeholder="6-20位字母、数字或符号">
<ul class="strength">
<li class="green"></li>
<li class="orange"></li>
<li class="red"></li>
</ul>
<p class="item"></p>
</div>
<div class="formInnerBox">
<label><span>* </span>确认密码：</label>
<input type="password" name="password" id="passwordAgain" placeholder="再次输入您的登录密码">
<p class="item"></p>
</div>
<div class="formInnerBox">
<label><span>* </span>姓名：</label>
<input type="text" name="text" id="nameTrue" placeholder="请输入姓名">
<div class="item underline">
姓名填写规则
<ul class="rule">
<li>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</li>
<li>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉子的拼音或同音字重新修改后保存。</li>
<li>3.姓名中有繁体字无法输入时，可用简体替代。</li>
<li>4.姓名较长，汉字与英文字符合计超过30个（1个汉子算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不去别大小写。</li>
</ul>
</div>
</div>
<div class="formInnerBox">
<label><span>* </span>证件类型：</label>
<select>
<option>二代身份证</option>
<option>港澳通行证</option>
<option>台湾通行证</option>
<option>护照</option>
</select>
</div>
<div class="formInnerBox">
<label><span>* </span>证件号码：</label>
<input type="text" name="text" id="IDcard" placeholder="请输入您的证件号码">
<p class="item"></p>
</div>
<div class="formInnerBox">
<label>邮箱：</label>
<input type="email" name="email" id="email" placeholder="请正确填写邮箱地址">
<p class="item"></p>
</div>
<div class="formInnerBox">
<label><span>* </span>手机号码：</label>
<input type="phone" name="phone" id="phone" placeholder="请输入您的手机号码">
<p class="item"></p>
</div>
<div class="formInnerBox">
<label><span>* </span>旅客类型：</label>
<select>
<option>成人</option>
<option>儿童</option>
<option>残疾军人</option>
<option>学生</option>
<option>伤残人民警察</option>
</select>
</div>
<div class="formInnerBox">
<label></label>
<input type="checkbox" name="checkbox" id="checkbox" > 我已阅读并同意遵守<i>《中国铁路客户服务中心网站服务条款》</i>
</div>
<div class="formInnerBox">
<input type="submit" name="submit" id="submit" value="下一步">
</div>
</div>
</div>
</div>
</section>
<!-- 尾部区域 -->
<footer>
<p>关于我们 | 网站声明</p>
<p>Copyright© 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2 | 网站声明</p>
</footer>
<script type="text/javascript" src="js/java.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
a{
color: #000;
}
/* 头部样式 */
header{
width: 100%;
height: 125px;
background: #efefef;
border-bottom: 2px solid #2487c9;
}
header>.headermin{
width: 1200px;
height: 100%;
margin: 0 auto;
}
.headermin>.logo{
width: 110px;
height: 110px;
background: url(../img/logo.png);
float: left;
cursor: pointer;
}
.headermin>h1{
font-weight: normal;
float: left;
border-right: 4px solid #000000;
padding-right: 15px;
font-size: 26px;
margin-top: 40px;
cursor: pointer;
}
.headermin>span{
float: left;
color: #666666;
margin: 47px 0 0 10px;
cursor: pointer;
}
.headermin>p{
float: left;
margin: 47px 40px 0 120px;
font-size: 14px;
}.headermin>p>a{
color: #fb7403;
display: inline-block;
margin: 0 5px;
}
.headermin>.mine{
float: left;
margin-top: 47px;
font-size: 14px;
position: relative;
height: 30px;
}
.headermin>.mine>.triangle{
float: right;
width: 0;
height: 0;
border-width: 8px;
border-style: solid;
border-color:#000 transparent transparent transparent;
margin: 5px 0 0 8px;
}
.headermin>.mine>.imooc:hover{
color: #fb7403;
}
.headermin>.mine>.drop-down{
width: 126px;
height: 282px;
background: #fcfcfc;
border: 1px solid #fb7403;
position: absolute;
top: 0;
left: 0;
margin-top: 30px;
padding: 12px;
display: none;
}
.headermin>.mine>.drop-down>.menulist{
font-size: 12px;
line-height: 26px;
text-indent: 1em;
color: #7d7e81;
}
.headermin>.mine>.drop-down>.menulist>a{
color: #7d7e81;
}
.headermin>.mine>.drop-down>.menulist:nth-child(2){
border-bottom: 1px dotted;
}
.headermin>.mine>.drop-down>.menulist:nth-child(3){
border-bottom: 1px dotted;
}
.headermin>.mine>.drop-down>.menulist:nth-child(5){
border-bottom: 1px dotted;
}
.headermin>.mine>.drop-down>.menulist:nth-child(6){
border-bottom: 1px dotted;
}
.headermin>.mine>.drop-down>.menulist:nth-child(8){
border-bottom: 1px dotted;
}
.headermin>.mine>.drop-down>.menulist:nth-child(9){
border-bottom: 1px dotted;
}
.headermin>.mine:hover .drop-down{
display: block;
}
.headermin>.mine>.drop-down>.menulist>a:hover{
color: #fb7403;
}
.headermin>.mobile{
float: left;
margin: 40px 0 0 50px;
width: 77px;
height: 25px;
text-align: center;
line-height: 25px;
font-size: 14px;
}
.headermin>.mobile>img{
width: 16px;
height: 23px;
}
/* 主体样式 */
section{
width: 100%;
height: 900px;
}
section>.sectionmin{
width: 1200px;
height: 100%;
margin: 0 auto;
}
.sectionmin>p{
margin: 15px 0;
}
.sectionmin>p>a{
color: #636363;
}
.sectionmin>p>span{
color: #636363;
}
.sectionmin>.formWrap{
width: 1200px;
height: 700px;
border: 1px solid #fb7403;
border-radius: 10px;
}
.sectionmin>.formWrap>.formTitle{
width: 100%;
height: 43px;
background: #fb7403;
border-radius: 5px;
color: #fff;
font-size: 18px;
line-height: 43px;
text-indent: 1em;
}
.sectionmin>.formWrap>.formBox{
width: 750px;
height: 500px;
margin: 50px auto;
}
.sectionmin>.formWrap>.formBox>.formInnerBox{
width: 700px;
margin-bottom: 20px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>label{
display: inline-block;
width: 100px;
height: 21px;
text-align-last: justify;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>label>span{
color: #ff8796;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>input{
width: 210px;
height: 20px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>select{
width: 215px;
height: 20px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>input[type="checkbox"]{
width: 15px;
height: 15px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>i{
color: #006ee1;
font-style: normal;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>input[type="submit"]{
width: 230px;
height: 38px;
background: #fb7403;
border-radius: 5px;
border: 1px solid #fb7403;
color: #fff;
font-size: 16px;
margin: 40px 0 0 130px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>input[type="submit"]:hover{
cursor: pointer;
background: #fff;
color: #fb7403;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.item{
display: inline-block;
font-size: 14px;
color: #fb7403;
position: relative;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.underline{
cursor: pointer;
text-decoration: underline;
}
.sectionmin>.formWrap>.formBox>.formInnerBox .rule{
width: 480px;
height: 260px;
border: 1px solid #469cd5;
background: #fff;
position: absolute;
top: 18px;
left: 85px;
padding:10px;
font-size: 14px;
color: #6c6c6c;
line-height: 32px;
display: none;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.item:hover .rule{
display: block;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.strength{
display: inline-block;
width: 150px;
height: 10px;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.strength>li{
width: 30%;
height: 10px;
float: left;
margin-right: 5px;
}
/*.sectionmin>.formWrap>.formBox>.formInnerBox>.strength>li:first-child{
background: green;
display: none;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.strength>li:nth-child(2){
background: orange;
display: none;
}
.sectionmin>.formWrap>.formBox>.formInnerBox>.strength>li:nth-child(3){
background: red;
display: none;
}*/
/* 尾部样式 */
footer{
width: 100%;
height: 80px;
background: #efefef;
border-top: 2px solid #2487c9;
text-align: center;
color: #999999;
line-height: 30px;
padding-top: 20px;
font-size: 14px;
}
var username=document.getElementById('username'),
password=document.getElementById('password'),
passwordAgain=document.getElementById('passwordAgain'),
nameTrue=document.getElementById('nameTrue'),
IDcard=document.getElementById('IDcard'),
email=document.getElementById('email'),
submit=document.getElementById('submit'),
phone=document.getElementById('phone'),
items=document.querySelectorAll('.item'),
strength=document.querySelector('.strength'),
green=strength.querySelector('.green'),
orange=strength.querySelector('.orange'),
red=strength.querySelector('.red'),
testPass=false,
testName=false,
testTrue=false,
testPassAgian=false,
testID=false,
testEmail=false,
testPhone=false,
pattern;
console.log(submit);
username.onblur=function(){
pattern=/^[a-z0-9_]{1}[\w]{5,29}$/i;
if(!this.value||!pattern.exec(username.value)){
items[0].innerHTML='6-30位字母、数字或“_”，字母开头';
items[0].style.color='red';
}else{
items[0].innerHTML='用户名输入正确';
items[0].style.color='green';
testName=true;
}
}
password.onblur=function(){
pattern=/^[\w|~|!|@|#|$|%|^|\|+|=|-|\.|[\]]{6,20}$/i;
// var p=/^[\w|\s|\d]{6,20}$/;
// var reg=/^([a-z]\d)|[/s]{6,20}$/;
if(!this.value||!pattern.exec(password.value)){
items[1].innerHTML='请输入6-20位字母、数字或符号';
items[1].style.color='red';
items[1].style.width='300px';
items[1].style.marginLeft='105px';
green.style.background='red';
orange.style.background='#ddd';
red.style.background='#ddd';
}else if(reg===pattern.exec(password.value)){
green.style.background='green';
orange.style.background='orange';
red.style.background='#fff';
items[1].innerHTML=' ';
items[1].style.width='100px';
testPass=true;
}else if(p===pattern.exec(password.value)){
green.style.background='green';
orange.style.background='orange';
red.style.background='red';
items[1].innerHTML=' ';
items[1].style.width='100px';
testPass=true;
}
else{
green.style.background='green';
orange.style.background='#fff';
red.style.background='#fff';
items[1].innerHTML=' ';
items[1].style.width='100px';
testPass=true;
}
}
passwordAgain.onblur=function(){
if(this.value==""){
items[2].innerHTML='密码不能为空';
items[2].style.color='red';
}else if(passwordAgain.value!=password.value){
items[2].innerHTML='两次密码设置不一致';
items[2].style.color='red';
}else{
items[2].innerHTML='两次输入一致';
items[2].style.color='green';
testPassAgian=true;
}
}
nameTrue.onblur=function(){
pattern=/^[\u4e00-\u9fa5]{3,30}$/;
if(!this.value||!pattern.exec(nameTrue.value)){
items[3].innerHTML='姓名只能包含中文或者英文,且字符在3-30个之间！';
items[3].style.color='red';
items[3].style.textDecoration='none';
}else{
items[3].innerHTML='姓名输入正确';
items[3].style.color='green';
testTrue=true;
}
}
IDcard.onblur=function(){
pattern=/^\d{17}[0-9xX]$/;
if(!this.value||!pattern.exec(IDcard.value)){
items[4].innerHTML='请输入18位身份证号码';
items[4].style.color='red';
}else{
items[4].innerHTML='号码输入正确';
items[4].style.color='green';
testID=true;
}
}
email.onblur=function(){
pattern=/(\w+\.)*\w+@(?:\w+\.)+([a-z])/i;
if(!this.value){
items[5].innerHTML='邮箱不能为空';
items[5].style.color='red';
}else if(!pattern.exec(email.value)){
items[5].innerHTML='请输入正确的邮箱';
items[5].style.color='red';s
}else{
items[5].innerHTML='邮箱格式正确';
items[5].style.color='green';
testEmail=true;
}
}
phone.onblur=function(){
pattern=/^((13)[0-9]{9}|(147)[0-9]{8}|(15)[0,1,2,3,5,6,7,8,9]{1}[0-9]{8}|(18)[0,1,2,5,6,7,8,9]{1}[0-9]{8})$/;
if(!this .value||!pattern.exec(phone.value)){
items[6].innerHTML='您输入的手机号码不是有效格式！';
items[6].style.color='red';
}else{
items[6].innerHTML='手机格式正确';
items[6].style.color='green';
testPhone=true;
}
}
submit.onclick=function(){
if(testName==false){
items[0].innerHTML='6-20位字母、数字或“_”，字母开头';
items[0].style.color='red';
}
if(testPass==false){
items[1].innerHTML='请输入6-20位字母、数字或符号';
items[1].style.color='red';
items[1].style.width='300px';
items[1].style.marginLeft='105px';
green.style.display='block';
green.style.background='red';
orange.style.display='block';
orange.style.background='#ddd';
red.style.display='block';
red.style.background='#ddd';
}
if(testPassAgian==false){
items[2].innerHTML='密码不能为空';
items[2].style.color='red';
}
if(testTrue==false){
items[3].innerHTML='姓名只能包含中文或者英文,且字符在3-30个之间！';
items[3].style.color='red';
}
if(testID==false){
items[4].innerHTML='请输入18位身份证号码';
items[4].style.color='red';
}
if(testEmail==false){
items[5].innerHTML='邮箱不能为空';
items[5].style.color='red';
}if(testPhone==false){
items[6].innerHTML='您输入的手机号码不是有效格式！';
items[6].style.color='red';
}else{
window.location.href="http://www.imooc.com";
}
}
1回答
-
你好，
1、文字排列方式实现这样的效果是可以的，不需要改动了。
2、密码处的验证可以使用test方法检测输入的内容，例如：
password.onblur = function() { pattern = /\S{6,20}/; // var p=/^[\w|\s|\d]{6,20}$/; // var reg=/^([a-z]\d)|[/s]{6,20}$/; if (!this.value || !pattern.test(this.value)) { items[1].innerHTML = '请输入6-20位字母、数字或符号'; items[1].style.color = 'red'; items[1].style.width = '300px'; items[1].style.marginLeft = '105px'; } else if (/^[1-9]{6,20}$/.test(this.value) || /^[a-zA-Z]{6,20}$/.test(this.value) || /^\W{6,20}$/.test(this.value)) { green.style.background = 'red'; orange.style.background = '#ddd'; red.style.background = '#ddd'; items[1].innerHTML = ' '; items[1].style.width = '100px'; testPass = true; } else if (/^[1-9|a-z]{6,20}$/i.test(this.value) || /^[\W|a-z]{6,20}$/i.test(this.value) || /^[\W|1-9]{6,20}$/i.test(this.value)) { green.style.background = 'red'; orange.style.background = 'orange'; red.style.background = '#ddd'; items[1].innerHTML = ' '; items[1].style.width = '100px'; testPass = true; } else if (/\W[1-9a-zA-Z]*/.test(this.value)) { green.style.background = 'red'; orange.style.background = 'orange'; red.style.background = 'green'; items[1].innerHTML = ' '; items[1].style.width = '100px'; testPass = true; } }自己可以测试下，祝学习愉快！
1
相似问题