请问老师为什么test会报错呢?
来源:4-8 编程练习
qq_AuspicousID_0
2019-05-06 20:03:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap_o{
width: 1000px;
height: 800px;
background-color: rgb(236, 235, 235);
margin: 0 auto;
}
.header{
background-color: rgb(42, 135, 203);
width: 100%;
height: 60px;
color: white;
line-height: 60px;
}
.wrap_i{
width: 540px;
margin: 40px auto;
text-align: right;
position: relative;
}
select{
width: 132px;
height: 21px;
}
p:last-child{
position: relative;
}
p:last-child input{
text-align: center;
display: block;
margin: 0 auto;
width: 60px;
height: 40px;
background-color: rgb(31, 102, 177);
border-radius: 5px;
color: white;
position: absolute;
left: 50%;
}
span{
display: inline-block;
width: 132px;
height: 21px;
}
.sex{
width: 408px;
}
</style>
</head>
<body>
<div class="wrap_o">
<header class="header">用户注册</header>
<div class="wrap_i">
<p>用户名:<input type="text" name="user_name" value=""><span></span></p>
<p>登录密码:<input type="text" name="password" value=""><span></span></p>
<p>确认密码:<input type="text" name="C_password" value=""><span></span></p>
<p>姓名:<input type="text" name="real_name" value=""><span></span></p>
<p class="sex">性别:<select><option value="male">男</option><option value="female">女</option></select></p>
<p>身份证号:<input type="text" name="id_num" value=""><span></span></p>
<p>邮箱:<input type="text" name="email" value=""><span></span></p>
<p>手机号码:<input type="text" name="tel_num" value=""><span></span></p>
<p><input type="submit" value="提交"></p>
</div>
</div>
<script>
//获取input标签集合
var allInput = document.getElementsByTagName("input");
//获取span标签集合,用于提示信息是否输入正确
var allSpan = document.getElementsByTagName("span");
//定义所有错误提示,将其保存在span集合中
var span = {};
//添加span属性
for (var i = 0; i < allSpan.length; i++) {
span['s_' + allInput[i].name] = '';
}
//依次赋值
span[0] = '6-20位字母、数字或“_”,字母开头';
span[1] = '6-20位,包含数字、字母或符号,中间不能有空格';
span[2] = '请设置密码';
span[3] = '真实姓名为两位到四位的中文';
span[4] = '请输入18位的身份证号码';
span[5] = '邮箱格式不正确';
span[6] = '电话号码不正确';
//定义正则表达式对象
var regExp = {};
//添加正则表达式对象属性
for (var i = 0; i < allInput.length - 1; i++) {
regExp['r_' + allInput[i].name] = '';
}
//添加正则表达式对象属性值
regExp[0] = /^[a-zA-Z]\w{5,19}$/; //用户名
regExp[1] = /^[\S]{6,18}$/; //密码
regExp[3] = /^[u4e00-u9fa5]{2,4}$/; //姓名
regExp[4] = /^(\d{14,15}x-)|(\d{17,18}x-)$/; //身份证号
regExp[5] = /^\w+@[a-z]\.(com|cn)$/; //邮箱
regExp[6] = /^1\d{10}$/; //手机号
// 为所有input标签添加光标移除事件
for (var i = 0; i < allInput.length - 1; i++) {
allInput[i].onblur = function () {
if (i == 2) {
if (allInput[i].value == allInput[i - 1].value) {
all[i].innerHTML = 'OK';
return;
}
else {
allSpan[i].innerHTML = span[i];
}
}
else {
if (regExp[i].test(this.value)) {
allSpan[i].innerHTML = 'OK';
} else {
allSpan[i].innerHTML = span[i];
}
}
}
};
</script>
</body>
</html>1回答
你好,是i值的问题,可以参考下图修改:

执行onblur事件的时候i值是for循环完毕之后的,所以test会报错,因为input框不存在,在事件外面添加一个自执行的匿名函数,这样就可以保存每一次循环的i值,执行事件的时候就可以获取到相对应的i值了。
可以测试下,祝学习愉快!
相似问题