搜索

首页  >  问答  >  正文

html - javascript中将数组赋值给变量怎么会变成字符串??

  1. 看到一个小题目,拿来练下手,想把代码写得智能一点,结果碰到坑了

  2. 获取name为name的对象获取成功,但是把对象放到二维数组里面,将二维数组的值赋给一个变量,然后变量变成了字符串。二后面用类似的办法怎么是对象??

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项检验</title>
</head>
<style>
    td{height: 40px;}
    .form{
        border-radius: 3px;
        border:1px solid #ccc;
    }
    input[type=submit]{float:right;background: #abcdef;border:1px solid #abcdef;height: 30px;width: 50px;}
    .info{font-size: 12px;}
</style>
<body>
    <form>
        <table>
            <tr>
                <td>名称</td>
                <td><input type="text" name="name" class="form"><br/><span class="info"></span></td>
            </tr>
            <tr>
                <td>密码 </td>
                <td><input type="text" name="password" class="form"><br/><span class="info"></span></td>
            </tr>
            <tr>
                <td>密码确认</td>
                <td><input type="text" name="com_password" class="form"><br/><span class="info"></span></td>
            </tr>
            <tr>
                <td>邮箱 </td>
                <td><input type="text" name="email" class="form"><br/><span class="info"></span></td>
            </tr>
            <tr>
                <td>手机</td>
                <td><input type="text" name="phone" class="form"><br/><span class="info"></span></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="提交"><br/><span class="info"></span></td>
            </tr>
        </table>
    </form>
    <script>
        //获取DOM对象,添加提示
        var dom = [];
        var spans = document.getElementsByTagName('span');
        //alert(document.getElementsByName('name')[0]);
        //document.getElementsByName('name')[0].value="11111";
        dom[0] = [];
        dom[0][0]={};
        dom[0][0] = document.getElementsByName('name')[0];
        //console.log( document.getElementsByName('name')[0]);
        dom[0][1] = spans[0];
        dom[0][2] = '必填,长度为4~16个字符';
        dom[0][3] = '姓名不能为空';
        dom[0][4] = /.{4,11}/;  //以下正则写得比较简略
        dom[1] = [];
        dom[1][0] = document.getElementsByName('password')[0];
        dom[1][1] = spans[1];
        dom[1][2] = '长度不小于6位';
        dom[1][3] = '密码不能为空';
        dom[1][4] = /.{6,}/;
        dom[2] = [];
        dom[2][0] = document.getElementsByName('com_password')[0];
        dom[2][1] = spans[2];
        dom[2][2] = '请再次输入密码';
        dom[2][3] = '密码验证不正确';
        dom[2][4] = /.{6,}/;
        dom[3] = [];
        dom[3][0] = document.getElementsByName('email')[0];
        dom[3][1] = spans[3];
        dom[3][2] = 'xxx@xxx';
        dom[3][3] = '邮箱填写不正确';
        dom[3][4] = /^.+\@.+$/;
        dom[4] = [];
        dom[4][0] = document.getElementsByName('phone')[0];
        dom[4][1] = spans[4];
        dom[4][2] = '必须为11位的手机号';
        dom[4][3] = '手机号码填写错误';
        dom[4][4] = /[0-9]{11}/;

        //var name = new Array([dom[0]]);
        var name = [dom[0]];
        console.log(typeof name);  //string
        console.log(dom[0] === name); //打印 true
        console.log(dom[0][0] == document.getElementsByName('name')[0]); //打印 true
        console.log(dom[0][0] == name[0]); //打印 false
        console.log(name[0] == document.getElementsByName('name')[0]); //打印 false
        name[0].onfocus = function(){
            name[1].innerHTML = name[2];
            name[1].style.color = 'gray';
        }
        name[0].onblur = function(){
                if(name[4].test(this.value)){
                    this.style.border = '1px solid #ADFF2F';
                }else{
                    this.style.border = '1px solid red';
                    name[1].innerHTML = name[3]
                    name[1].style.color = 'red';
                }
            
            }

        var password = dom[1];
        console.log(typeof password);
        console.log(password[0] == document.getElementsByName('password')[0]);
        password[0].onfocus = function(){
            password[1].innerHTML = password[2];
            password[1].style.color = 'gray';
        }
        password[0].onblur = function(){
                if(password[4].test(this.value)){
                    this.style.border = '1px solid #ADFF2F';
                }else{
                    this.style.border = '1px solid red';
                    password[1].innerHTML = password[3]
                    password[1].style.color = 'red';
                }
            
            }

            var com_password = dom[2];
        com_password[0].onfocus = function(){
            com_password[1].innerHTML = com_password[2];
            com_password[1].style.color = 'gray';
        }
        com_password[0].onblur = function(){
                if(com_password[4].test(this.value)){
                    this.style.border = '1px solid #ADFF2F';
                    if(com_password[0].value !== password[0].value) {
                    com_password[1].innerHTML = '与密码不匹配';
                    com_password[1].style.color = 'red';
                    }

                }else{
                    this.style.border = '1px solid red';
                    com_password[1].innerHTML = com_password[3]
                    com_password[1].style.color = 'red';
                    
                    }
            
            }
        

            var email = dom[3];
            email[0].onfocus = function(){
            email[1].innerHTML = email[2];
            email[1].style.color = 'gray';
        }
        email[0].onblur = function(){
                if(email[4].test(this.value)){
                    this.style.border = '1px solid #ADFF2F';
                }else{
                    this.style.border = '1px solid red';
                    email[1].innerHTML = email[3]
                    email[1].style.color = 'red';
                }
            
            }

            var phone = dom[4];
        phone[0].onfocus = function(){
            phone[1].innerHTML = phone[2];
            phone[1].style.color = 'gray';
        }
        phone[0].onblur = function(){
                if(phone[4].test(this.value)){
                    this.style.border = '1px solid #ADFF2F';
                }else{
                    this.style.border = '1px solid red';
                    phone[1].innerHTML = phone[3]
                    phone[1].style.color = 'red';
                }
            
            }
        
    </script>
</body>
</html>

求解求解

怪我咯怪我咯2780 天前695

全部回复(1)我来回复

  • 伊谢尔伦

    伊谢尔伦2017-05-18 11:03:21

    变量.toString(),就改变了呀

    回复
    0
  • 取消回复