1.我的IMOOC下拉列表和姓名填写规则，鼠标移出后没来得及移入列表就消失 2.密码强度验证
来源：3-10 作业题
天青色烟雨蒙
2019-06-20 22:18:04
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="wrap">
<!-- 头部-->
<header class="header">
<div class="header_wrap w">
<!-- logo-->
<div class="logo">
<div class="logo_image"></div>
<h3>慕课高铁客户服务中心</h3><span>|</span><p>客户服务</p>
</div>
<!-- nav导航-->
<div class="nav">
<a href="javascript:;">意见反馈</a>
<a href="javascript:;">imooc@com</a>
<a href="javascript:;">您好，请 <span>登录</span></a>
<span>|</span>
<a href="javascript:;">注册</a>
<a href="javascript:;" class="myImooc">我的IMOOC</a>
<div class="list">
<ul>
<li><a href="javascript:;">未完成订单</a></li>
<li><a href="javascript:;">已完成订单（改/退）</a></li>
<li><a href="javascript:;">我的保险</a></li>
<li><a href="javascript:;">查看个人信息</a></li>
<li><a href="javascript:;">账户安全</a></li>
<li><a href="javascript:;">常用联系人</a></li>
<li><a href="javascript:;">重点旅客预约</a></li>
<li><a href="javascript:;">遗失物品查找</a></li>
<li><a href="javascript:;">服务查询</a></li>
<li><a href="javascript:;">投诉</a></li>
<li><a href="javascript:;">建议</a></li>
</ul>
</div>
<span class="sanjiao_down"></span>
<a href="javascript:;">
<span class="img"></span>
手机版
</a>
</div>
</div>
</header>
<!-- 主体-->
<section class="section w">
<div class="title">您现在的位置 : <span>客运首页</span> <span> ></span> <span>注册</span></div>
<div class="form">
<div class="top">账户信息</div>
<table class="userInfo">
<tr>
<td>*</td>
<td>用户名：</td>
<td><input type="text" class="username" placeholder="用户名设置成功后不可修改"/></td>
<td><span class="usernameErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>登录密码：</td>
<td><input type="password" class="upwd" placeholder="6-20位字母、数字或符号"/></td>
<td>
<div class="red"></div>
<div class="orange"></div>
<div class="green"></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="upwdErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>确认密码：</td>
<td><input type="password" class="repwd" placeholder="再次输入您的登录密码"/></td>
<td><span class="repwdErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>姓名：</td>
<td><input type="text" class="realName" placeholder="请输入姓名"/></td>
<td>
<span class="realNameErr">
<a href="javascript:;" class="realName_rule">姓名填写规则</a>
<a href="javascript:;" class="realName_text"></a>
</span>
</td>
</tr>
<tr>
<td>*</td>
<td>证件类型：</td>
<td>
<select name="docType">
<option value="idNumber">二代身份证</option>
<option value="hongKong">港澳通行证</option>
<option value="taiWan">台湾通行证</option>
<option value="passport">护照</option>
</select>
</td>
<td><span class="docTypeErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>证件号码：</td>
<td><input type="text" class="docNum" placeholder="请输入您的证件号码"/></td>
<td><span class="docNumErr"></span></td>
</tr>
<tr>
<td></td>
<td>邮箱:</td>
<td><input type="text" class="email" placeholder="请正确填写邮箱地址"/></td>
<td><span class="emailErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>手机号码：</td>
<td><input type="text" class="phone" placeholder="请输入您的手机号码"/></td>
<td><span class="phoneErr"></span></td>
</tr>
<tr>
<td>*</td>
<td>旅客类型：</td>
<td>
<select name="PassengerType">
<option value="adult">成人</option>
<option value="children">儿童</option>
<option value="student">学生</option>
<option value="army">残疾军人</option>
<option value="police">伤残人民警察</option>
</select>
</td>
<td></td>
</tr>
<tr class="check">
<td></td>
<td></td>
<td style="color: #000">
<input type="checkbox"/>我已阅读并同意遵守
</td>
<td><span style="color: #006ee1">《中国铁路客户服务中心网站服务条款》</span></td>
</tr>
</table>
<input type="submit" class="submitBtn" value="下一步"/>
</div>
</section>
<!-- 尾部-->
<footer class="footer">
<div class="text">
<p>关于我们 <span>|</span> 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reseverd | 京ICP备 13046642号-2</p>
</div>
</footer>
</div>
<script src="js/index.js"></script>
</body>
</html>
============================================================================================
/*通用样式*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
ul, li {
list-style: none;
}
/*版心*/
.w {
width: 1000px;
margin: 0 auto;
}
.wrap {
width: 100%;
}
/*头部*/
.header {
height: 125px;
border-bottom: 2px solid #2487c9;
background-color: #efefef;
}
.header_wrap {
position: relative;
}
.logo {
float: left;
}
.logo_image, .logo h3, .logo span, .logo p {
float: left;
line-height: 125px;
margin: 0 5px;
}
.logo_image {
width: 110px;
height: 110px;
background: url("../img/logo.png");
}
.logo h3 {
font-weight: 400;
font-size: 20px;
}
.logo span {
font-weight: 700;
font-size: 24px;
}
.logo p {
color: #666666;
font-size: 16px;
}
.nav {
float: left;
line-height: 125px;
position: absolute;
right: 0;
top: 0;
}
.nav a {
margin: 0 5px;
font-size: 14px;
}
.sanjiao_down {
width: 0;
height: 0;
overflow: hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width: 10px;
border-style: solid dashed dashed dashed; /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
border-color: #000 transparent transparent transparent;
}
/*.nav a:last-child {*/
/*margin-left: 45px;*/
/*}*/
.nav a:last-child span {
display: inline-block;
width: 15px;
height: 25px;
background: url("../img/img1.png");
background-size: 100% 100%;
vertical-align: middle;
}
.nav a:nth-child(2),
.nav a:nth-child(3) span {
color: #fa7403;
}
.nav a:nth-child(6) {
position: relative;
/*color: red;*/
}
.list {
width: 170px;
height: 350px;
border: 1px solid #fa7403;
position: absolute;
top: 85px;
left: 330px;
background-color: #FCFCFC;
padding: 12px;
z-index: 99;
/*display: none;*/
}
.list li {
height: 30px;
line-height: 30px;
}
.list li:nth-child(3),
.list li:nth-child(6),
.list li:nth-child(9) {
border-bottom: 1px dotted #ddd;
border-top: 1px dotted #ddd;
}
/*主体*/
.title {
margin: 10px 0;
}
.title span {
color: #636363;
}
.form {
height: 630px;
border: 1px solid #fb7403;
border-radius: 10px;
position: relative;
}
.top {
height: 45px;
background-color: #fb7403;
color: #fff;
line-height: 45px;
padding-left: 15px;
border: 1px solid #fb7403;
border-radius: 10px 10px 0 0;
}
.userInfo {
margin: 50px auto;
border-spacing: 15px;
text-align-last: justify;
}
.userInfo tr td:first-child {
color: red;
}
.userInfo tr td:nth-child(2) {
width: 100px;
}
.userInfo tr td:nth-child(3) {
width: 185px;
}
.userInfo tr td:nth-child(3) input,
.userInfo tr td:nth-child(3) select {
padding: 3px 6px;
}
.userInfo tr td:last-child {
color: #fb7403;
}
.userInfo tr:nth-child(2) td:last-child div {
width: 50px;
height: 10px;
float: left;
margin-right: 5px;
display: none;
}
.userInfo tr:nth-child(2) td:last-child div.red {
background-color: red;
}
.userInfo tr:nth-child(2) td:last-child div.orange {
background-color: orange;
}
.userInfo tr:nth-child(2) td:last-child div.green {
background-color: green;
}
.userInfo .realName_rule {
text-decoration: underline;
color: red;
position: relative;
}
.userInfo .realName_text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: 120px;
display: block;
width: 502px;
height: 282px;
z-index: 99;
background: url("../img/text.jpg");
display: none;
}
.submitBtn {
width: 235px;
height: 40px;
background-color: #fb7403;
border-radius: 5px;
color: #fff;
line-height: 40px;
text-align: center;
border: 0;
outline: 0;
position: absolute;
left: 50%;
margin-left: -117.5px;
bottom: 25px;
cursor: pointer;
}
.submitBtn:hover {
background-color: #fff;
color: #fb7403;
border: 1px solid #fb7403;
}
/*页脚*/
.footer {
height: 105px;
background-color: #dcdcdc;
border-top: 2px solid #2487c9;
margin-top: 125px;
text-align: center;
position: relative;
}
.footer .text {
width: 600px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -300px;
}
.footer p {
line-height: 35px;
color: #999999;
}
===========================================================================================
/**
* Created by Lily on 2019/6/19.
*/
var myImooc = document.querySelector('.myImooc');
var list = document.querySelector('.nav .list');
var username = document.querySelector('.username');
var upwd = document.querySelector('.upwd');
var repwd = document.querySelector('.repwd');
var realName = document.querySelector('.realName');
var docNum = document.querySelector('.docNum');
var email = document.querySelector('.email');
var phone = document.querySelector('.phone');
var submitBtn=document.querySelector('.submitBtn');
var realName_rule=document.querySelector('.realName_rule');
var realName_text=document.querySelector('.realName_text');
var usernameErr = document.querySelector('.usernameErr');
var upwdErr = document.querySelector('.upwdErr');
var red = document.querySelector('.red');
var orange = document.querySelector('.orange');
var green = document.querySelector('.green');
var repwdErr = document.querySelector('.repwdErr');
var realNameErr = document.querySelector('.realNameErr');
var docNumErr = document.querySelector('.docNumErr');
var emailErr = document.querySelector('.emailErr');
var phoneErr = document.querySelector('.phoneErr');
var patter_username = /^[a-zA-Z0-9_]{6,30}$/;
var patter_upwd = /^\w{6,20}$/;
var patter_red = /^\w+$/;
var patter_orange=/^[a-zA-Z]{6,20}$/;
var patter_green=/^\W{6,20}$/;
var patter_realName = /^[\u4E00-\u9FA5a-zA-Z]{3,30}/;
var patter_docNum = /^\d{17}(?:\d|x|X)$/;
var patter_email = /^\w+@\w+[\.\w]+$/;
var patter_phone =/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
myImooc.onmouseover = function () {
this.style.color = '#fa7403';
list.style.display = 'block';
}
myImooc.onmouseout = function () {
this.style.color = '';
list.style.display = 'none';
}
list.onmouseover = function () {
this.style.display = 'block';
}
//username
username.onblur = function () {
if (patter_username.exec(this.value)) {
usernameErr.innerHTML = '用户名输入正确';
usernameErr.style.color = 'green';
} else {
usernameErr.innerHTML = "6-30位字母、数字或'_',字母开头";
usernameErr.style.color = 'red';
}
}
//upwd
upwd.onblur = function () {
if (patter_upwd.exec(this.value)) {
upwdErr.innerHTML = '';
if (patter_red.exec(this.value)) {
red.style.display = 'block';
}else if(patter_orange.exec(this.value)){
orange.style.display='block';
}else if(patter_green.exec(this.value)){
green.style.display='block';
}
} else {
upwdErr.innerHTML = '请输入6-20位字母、数字或符号';
upwdErr.style.color = 'red';
}
}
//repwd
repwd.onblur = function () {
if (patter_upwd.exec(this.value)) {
if (this.value === upwd.value) {
repwdErr.innerHTML = '两次密码输入一致';
repwdErr.style.color = 'green';
} else {
repwdErr.innerHTML = '两次密码输入不一致';
repwdErr.style.color = 'red';
}
} else {
repwdErr.innerHTML = '密码不能为空';
repwdErr.style.color = 'red';
}
}
//realName
realName.onblur = function () {
if (patter_realName.exec(this.value)) {
realNameErr.innerHTML = '姓名输入正确';
realNameErr.style.color = 'green';
} else {
realNameErr.innerHTML = '姓名只能包含中文或者英文,且字符在3-30个之间';
realNameErr.style.color = 'red';
}
}
//docNum
docNum.onblur = function () {
if (patter_docNum.exec(this.value)) {
docNumErr.innerHTML = '号码输入正确';
docNumErr.style.color = 'green';
} else {
docNumErr.innerHTML = '18位数字，最后一位可以是大写或者小写的x';
docNumErr.style.color = 'red';
}
}
//email
email.onblur = function () {
if (patter_email.exec(this.value)) {
emailErr.innerHTML = '邮箱格式正确';
emailErr.style.color = 'green';
} else {
emailErr.innerHTML = '请输入正确的邮箱';
emailErr.style.color = 'red';
}
}
//phone
phone.onblur=function(){
if(patter_phone.exec(this.value)){
phoneErr.innerHTML='手机格式正确';
phoneErr.style.color='green';
}else{
phoneErr.innerHTML='您输入的手机号码不是有效的格式!';
phoneErr.style.color='red';
}
}
//submitBtn
submitBtn.onclick=function(){
username.onblur();
upwd.onblur();
repwd.onblur();
realName.onblur();
docNum.onblur();
email.onblur();
phone.onblur();
if(patter_username.test(username.value)&&
patter_upwd.test(upwd.value)&&
patter_red.test(red.value)&&
patter_realName.test(realName.value)&&
patter_docNum.test(docNum.value)&&
patter_email.test(email.value)&&
patter_phone.test(phone.value)){
window.open('https://www.imooc.com','_self');
}else{
alert('验证失败');
}
}
//realName_rule
realName_rule.onmouseover=function(){
realName_text.style.display='block';
}
realName_rule.onmouseout=function(){
realName_text.style.display='none';
}
写回答
1回答
-
同学你好，
1. 因为你的imooc和下拉列表是同级元素导致鼠标移出imooc隐藏下拉列表和鼠标移入下拉列表显示两个事件是冲突的， 建议：
（1）可以通过增加a标签的上下内边距， 增加鼠标在imooc的有效区域
(2) 通过设置一个全局变量， 判断鼠标是否移入下拉菜单，
2. 姓名规则这里， 建议： 可以为父元素realNameErr添加鼠标移入事件， 在鼠标移入父元素的时候， 显示提示信息， 鼠标离开父元素的时候隐藏， 另， 需要给父级元素设置相对定位， 让提示显示参照realNameErr进行定位（具体细节同学自己调整哦）
3. 棉麻验证规则的强度的正则表达是， 可以参考下图
同学可以结合示例， 自己测试修改一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
1
相似问题