简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - Wie wird aus der Zuweisung eines Arrays zu einer Variablen in Javascript eine Zeichenfolge? ?
怪我咯
怪我咯 2017-05-18 11:01:21
0
1
646

  1. Ich habe ein kleines Thema gesehen und es zum Üben genutzt. Ich wollte den Code intelligenter schreiben, bin aber in eine Falle geraten

  2. Das Objekt mit dem Namen wird erfolgreich abgerufen, aber das Objekt wird in einem zweidimensionalen Array platziert, der Wert des zweidimensionalen Arrays wird einer Variablen zugewiesen und die Variable wird dann zu einer Zeichenfolge. Wie können wir später eine ähnliche Methode verwenden, um Objekte zu identifizieren? ? 

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

Lösen, lösen

怪我咯
怪我咯

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

Antworte allen(1)
伊谢尔伦
伊谢尔伦2017-05-18 11:03:21 1 Etage

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！