请问老师为什么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回答

好帮手慕星星

2019-05-07

你好,是i值的问题,可以参考下图修改:

http://img.mukewang.com/climg/5cd0eb7500018a9809490657.jpg

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

可以测试下,祝学习愉快!

0

0 学习 · 14456 问题

查看课程