关于4-8编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
width:100%;
height:20px;
background:blue;
text-align:left;
color:white;
}
body {
background: gray;
}
.wrap {
position: relative;
width: 700px;
height: 100%;
margin: 50px auto;
-webkit-transform: translate(-25%, 0);
-moz-transform: translate(-25%, 0);
-ms-transform: translate(-25%, 0);
-o-transform: translate(-25%, 0);
transform: translate(-25%, 0);
}
.wrap > div {
position: relative;
width: 500px;
height: 100%;
margin: 10px auto;
text-align: right;
}
.wrap > div span {
position: absolute;
display: none;
width: 250px;
left: 101%;
line-height: 23px;
font-size: 10px;
color: red;
text-align: left;
}
.wrap > div select {
width: 160px;
}
</style>
</head>
<body>
<header>用户注册</header>
<div class="wrap">
<div>
用户名：<input type="text" id="username">
<span name="ok">ok</span>
<span name="error">6-20位字母、数字或“_”,字母开头</span>
</div>
<div>
登录密码：<input type="password" id="loginPwd">
<span name="ok">ok</span>
<span name="error">密码6-18位，包括数字字母或符号，中间不能有空格</span>
</div>
<div>
确认密码：<input type="password" id="confirmPwd">
<span name="ok">ok</span>
<span name="error">两次输入密码不一致</span>
</div>
<div>
姓名：<input type="text" id="name">
<span name="ok">ok</span>
<span name="error">真实姓名，两位到四位的中文汉字</span>
</div>
<div>
性别：<select>
<option>男</option>
<option>女</option>
</select>
</div>
<div>
身份证号：<input type="text" id="id">
<span name="ok">ok</span>
<span name="error">15位或者18位的数字</span>
</div>
<div>
邮箱：<input type="text" id="email">
<span name="ok">ok</span>
<span name="error">邮箱格式不正确</span>
</div>
<div>
手机号码：<input type="text" id="phone">
<span name="ok">ok</span>
<span name="error">手机号码不正确</span>
</div>
</div>
<script type="text/javascript">
(function() {
var regExp = {
usernameR: /^[a-z]\w{5,20}$/i,
loginPwdR: /^\w{6,18}[^\s]?$/,
nameR: /^[\u4e00-\u9fa5]{2,4}$/,
idR: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9][xX])$/,
emailR: /^[a-z0-9]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/i,
phoneR: /^(13)[0-9]{9}|(17)[0-9]{11}|(147)[0-9]{8}|(15)[0,1,2,3,5,6,7,8,9]{1}[0-9]{8}|(18)[0,2,5,6,7,8,9]{1}[0-9]{8}$/,
};
var infoLists = {
username: document.getElementById("username"),
loginPwd: document.getElementById("loginPwd"),
confirmPwd: document.getElementById("confirmPwd"),
name: document.getElementById("name"),
id: document.getElementById("id"),
email: document.getElementById("email"),
phone: document.getElementById("phone"),
};
var ok = {
usernameOk: document.getElementsByName("ok")[0],
loginPwdOk: document.getElementsByName("ok")[1],
confirmPwdOk: document.getElementsByName("ok")[2],
nameOk: document.getElementsByName("ok")[3],
idOk: document.getElementsByName("ok")[4],
emailOk: document.getElementsByName("ok")[5],
phoneOk: document.getElementsByName("ok")[6],
}
var error = {
usernameError: document.getElementsByName("error")[0],
loginPwdError: document.getElementsByName("error")[1],
confirmPwdError: document.getElementsByName("error")[2],
nameError: document.getElementsByName("error")[3],
idError: document.getElementsByName("error")[4],
emailError: document.getElementsByName("error")[5],
phoneError: document.getElementsByName("error")[6],
}
infoLists.username.onblur = function() {
if (regExp.usernameR.test(infoLists.username.value)) {
ok.usernameOk.style.display = "inline-block";
error.usernameError.style.display = "none";
}else {
error.usernameError.style.display = "inline-block";
}
}
infoLists.loginPwd.onblur = function() {
if (regExp.loginPwdR.test(infoLists.loginPwd.value)) {
ok.loginPwdOk.style.display = "inline-block";
error.loginPwdError.style.display = "none";
}else {
error.loginPwdError.style.display = "inline-block";
}
}
infoLists.confirmPwd.onblur = function() {
if (infoLists.loginPwd.value != null && infoLists.loginPwd.value == infoLists.confirmPwd.value) {
ok.confirmPwdOk.style.display = "inline-block";
error.confirmPwdError.style.display = "none";
}else {
error.confirmPwdError.style.display = "inline-block";
}
}
infoLists.name.onblur = function() {
if (regExp.nameR.test(infoLists.name.value)) {
ok.nameOk.style.display = "inline-block";
error.nameError.style.display = "none";
}else {
error.nameError.style.display = "inline-block";
}
}
infoLists.id.onblur = function() {
if (regExp.idR.test(infoLists.id.value)) {
ok.idOk.style.display = "inline-block";
error.idError.style.display = "none";
}else {
error.idError.style.display = "inline-block";
}
}
infoLists.email.onblur = function() {
if (regExp.emailR.test(infoLists.email.value)) {
ok.emailOk.style.display = "inline-block";
error.emailError.style.display = "none";
}else {
error.emailError.style.display = "inline-block";
}
}
infoLists.phone.onblur = function() {
if (regExp.phoneR.test(infoLists.phone.value)) {
ok.phoneOk.style.display = "inline-block";
error.phoneError.style.display = "none";
}else {
error.phoneError.style.display = "inline-block";
}
}
})();
</script>
</body>
</html>我认为我的代码还可以优化一些，将那些onblur函数合并成一个函数，但是合并成这么一个for循环，并不能实现效果，应该是每个对象都各自独立的原因，请问要怎么优化呢？
for（var i in infoLists）{
i.onblur = function() {
if (regExp.i.test(infoLists.i.value)) {
ok.i.style.display = "inline-block";
error.i.style.display = "none";
}else {
error.i.style.display = "inline-block";
}
}
}
26
收起
正在回答
3回答
你好，因为最开始遍历的是infoLists这个对象，所以i是infoLists这个对象这个对象中的，对应的就是如下，可以输出测试下哦。
所以regExp等其他几个对象是没有办法直接使用i来获取值的，根据命名的规则，这里名字主要是后面有区别，所以可以尝试字符串拼接。整体可参考如下：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
HTML5&CSS3进阶与常用框架 2018
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星