老师为什么我这我无法添加失去焦点事件，但是可以添加点击事件
来源：3-10 作业题
慕容5109188
2019-09-14 21:35:12
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<body>
<!--头部区域-->
<header>
<div class="header">
<div class="header-box">
<!--左导航-->
<div class="nav-left">
<a href="#" class="logo"></a>
<div class="text">
<a href="#" class="text1">慕课高铁客服中心</a>
<span class="text1">|</span>
<a href="#" class="text2">客服服务</a>
</div>
</div>
</div>
</div>
<!--右导航-->
<div class="nav-right">
<div class="nav-right-center">
<a href="#">意见反馈</a>
<a href="#" class="text3">IMOOC@.com</a>
<a href="#">您好请，</a>
<a href="#">登陆</a>
<span>|</span>
<a href="#" class="text4">注册</a>
<a href="#" class="">我的IMOOC</a>
<a href="#"></a>
<!--下拉菜单-->
<span class="space"></span>
<div class="dropdown-content">
<a href="#">未完成订单</a>
<a href="#" class="dotted">已完成订单（改/退)</a>
<a href="#" class="dotted">我的保险</a>
<a href="">查看个人信息</a>
<a href="" class="dotted">账户安全</a>
<a href="" class="dotted">常用联系人</a>
<a href="">重点旅客预约</a>
<a href="" class="dotted">遗失物品查找</a>
<a href="" class="dotted">服务查询</a>
<a href="">投诉</a>
<a href="">建议</a>
</div>
<div class="mobile-box">
<span class="mobileVersion">
<span href="#" class="phone"></span>
<a href="#" class="mobile">手机版</a>
</span>
</div>
</div>
</div>
</div>
</header>
<!--内容区域-->
<div class="content">
<div class="content-head">
<a href="#" class="content-text">您现在的位置:</a>
<a href="#" class="">客运首页</a>
<span>></span>
<a href="#">注册</a>
</div>
<div class="content-form">
<span class="content-form-head">账户信息</span>
<div class="content-form-body">
<div class="item">
<span class="important">*</span>
<label for="userAccount">用户名 :</label>
<input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改" autofocus>
<label class="item_"></label>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userPass">登陆密码 :</label>
<input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userPass_">确认密码 :</label>
<input type="password" id="userPass_">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userName">姓名 :</label>
<input type="text" id="userName" placeholder=" 请输入姓名,中文且最多五位">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="information">证件类型 :</label>
<select id="information" class="information-text">
<option>二代身份证</option>
<option>签证</option>
</select>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="email">证件号码 :</label>
<input type="email" id="idnum" placeholder=" 请输入正确邮箱格式">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="telephone">邮箱 :</label>
<input type="tel" id="email" placeholder=" 请输入您的手机号码">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="telephone">手机号码 :</label>
<input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
<span class="item_"></span>
</div>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="traveller">旅客类型:</label>
<select id="traveller">
<option>成人</option>
<option>儿童</option>
<option>老人</option>
<option>学生</option>
</select>
</div>
<div id="end">
<input type="checkbox" id="choose">
<label for="choose" class="agreen">我已阅读并同意遵守规定</label>
<a href="#" style="color: blue" class="text-a">（中国铁路客服服务中心网站条款）</a>
</div>
<button id="button" class="button">下一步</button>
</div>
</div>
</div>
<!--底部区域-->
<div class="bottom" style="color: darkgray">
<div class="bottom-text">
<a>关于我们</a>
<span>|</span>
<a>网站声明</a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="./JS/test.js"></script>
//获取各个id
var userAccount = document.getElementById("userAccount");
var items = document.getElementsByClassName("item_");
userAccount.onblur = function () {//验证用户名
var reg = /^\w{6,18}$/;
if (userAccount.value ==""){
userAccount.innerHTML ="用户名不能为空";
userAccount.style.color = "red";
}else {
if (!reg.exec(userAccount.value)){
items[0].innerHTML="请输入6-18位数字，字母，_";
items[0].style.color = "red";
}else {
items[0].innerHTML = "正确";
items[0].style.color = "green";
test1 = true;
}
}
};
1回答
-
同学你好，老师测试你的这段代码可以正常添加失去焦点事件哦。
另， 用户名为空的时候， 应该是给输入框左侧的元素设置内容和样式哦
测试结果
同学可以自己下去在测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题