简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - How does assigning an array to a variable in javascript turn into a string? ?
怪我咯
怪我咯 2017-05-18 11:01:21
0
1
648

  1. I saw a small question and used it to practice. I wanted to write the code smarter, but I ran into a trap

  2. Getting the object with name is successful, but put the object into a two-dimensional array, assign the value of the two-dimensional array to a variable, and then the variable becomes a string. How can we use a similar method later to identify objects? ? 

<!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>

SolutionSolution

怪我咯
怪我咯

走同样的路，发现不同的人生

reply all(1)
伊谢尔伦
伊谢尔伦2017-05-18 11:03:21 1 floor

The variable .toString() has changed

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！