请问老师为什么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值了。
可以测试下,祝学习愉快!
相似问题