spans[i]中和str[i]中的i没有办法与input[i]中的i共用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.wrapper{
width: 800px;
height: 600px;
margin: 100px auto;
}
.wrapper header{
width: 100%;
height: 40px;
color: white;
background-color: #6495ED;
}
.wrapper header p{
line-height: 40px;
font-size: 20px;
padding-left: 10px;
}
form{
width:100%;
height: 520px;
background:#DEDEDE;
text-align: center;
padding:30px 0;
margin:0 auto;
position: relative;
}
form p{
display: inline-block;
position: absolute;
right: 500px;
}
form div{
margin-top: 10px;
}
form input{
height: 25px;
}
form #sex{
margin-left:-132px;
}
form #submit{
width: 90px;
height: 50px;
font-size:20px;
border-radius: 10px;
background-color: #436EEE;
color: white;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<p>用户注册</p>
</header>
<form id="form">
<div>
<p>用户名：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<div>
<p>登录密码：</p><input type="text" name="name" id="pass" ><span class="present"></span>
</div>
<div>
<p>确认密码：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<div>
<p>姓名：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<div>
<p>性别：</p><select id="sex"><option value="男" selected>男</option><option value="女">女</option></select><span></span>
</div>
<div>
<p>身份证号码：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<div>
<p>邮箱：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<div>
<p>电话：</p><input type="text" name="name" id="username" ><span class="present"></span>
</div>
<input type="submit" value="提交" id="submit">
</form>
</div>
<script type="text/javascript">
var spans=document.getElementsByTagName("span");
var forms=document.getElementById("form");
var inputs=forms.getElementsByTagName("input");
var submit=document.getElementById("submit");
var input1=false;
var input2=false;
var input3=false;
var input4=false;
var input5=false;
var input6=false;
var input7=false;
<!-- 各个需要验证的正则实例函数 -->
var reg=[/^[a-z]\w{5,17}$/i,//账号验证
/^\S[6,18]$/,//密码验证
/^\S[6,18]$/,//确认密码
/^[\u4e00-\u9fa5]{2,4}$/,//中文名验证
null,
/^\d{17}[0-9x]$|^\d(15)$/,//身份证号码验证
/^\w+@\w+\.[a-zA-Z_]{2,4}$/i,//邮箱验证
/^\d{11}$///电话号码验证
];
var str=["6-20位字母、数字或“_”,字母开头",
"6-18位，包括数字字母或符号，中间不能有空格",
"请输入密码",
"真实姓名，两位到四位的中文汉字",
null,
"请输入18位的身份证号码",
"请输入邮箱",
"请输入电话号码"
];
var str2={
'1':"格式不正确",
'2':"两次输入密码不一致",
};
<!-- input获得焦点之后的内容显示 -->
for( i=0;i<inputs.length;i++){
inputs[i].onfocus=function(){
spans[i].innerHTML=str[i];
}
</script>
</body>
</html>
就作用域而言，内部应该是能访问到外部，而且for定义的还是全局的变量，为什么无法访问呢
正在回答
你好，for循环给每一个输入框绑定onfocus事件，可以这样理解：
每个元素都会有onfocus事件，但是里面并没有保存循环的i值，所以当执行事件获取i值的时候找到的就是循环之后的i值。
如果外面加了立即执行函数，就会在每个事件作用域中保存循环的i值，这样就会对应起来。
可以再测试理解下。
同学你好，
onfocus事件中用到i的值，当前作用域中没有i值，就会沿着作用域向上找，找到的就是for循环完毕之后的i值，循环停止后i值为8，而数组（spans和str）长度为8，最后一项索引为7，所以元素是不存在的，使用innerHTML就会报错。之前在js变量，作用域部分是讲解过的，如果忘记了可以回顾一下哦。
这里可以使用立即执行函数，在当前作用域中保存每次循环的i值，参考：
修改之后测试效果：
有布局问题，没有预留span标签的位置，所以内容显示出来会重新计算居中显示的位置，而p标签用的是定位，位置不会改变。建议提前预留span标签的位置，聚焦的时候添加内容就好，或者也改成定位，固定显示的位置，如下：
自己试着改一改，祝学习愉快！
望采纳~
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星