html - Bagaimanakah memberikan tatasusunan kepada pembolehubah dalam javascript bertukar menjadi rentetan? ?
怪我咯
怪我咯 2017-05-18 11:01:21
0
1
647
  1. Saya melihat topik kecil dan menggunakannya untuk berlatih Saya mahu menulis kod dengan lebih bijak, tetapi saya tersepit

  2. Mendapatkan objek dengan nama berjaya, tetapi letakkan objek ke dalam tatasusunan dua dimensi, tetapkan nilai tatasusunan dua dimensi kepada pembolehubah, dan kemudian pembolehubah itu menjadi rentetan. Bagaimanakah kita boleh menggunakan kaedah yang serupa kemudian untuk mengenal pasti objek? ?

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

Selesai Selesaikan

怪我咯
怪我咯

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

membalas semua(1)
伊谢尔伦

Pembolehubah .toString() telah berubah

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!