JavaScript實現簡易登錄註冊頁面

Posted on by

本文實例為大傢分享瞭JavaScript實現簡易登錄註冊頁面的具體代碼，供大傢參考，具體內容如下

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>login</title>
    <!-- <link rel="stylesheet" type="text/css" href="pageChange.css" /> -->
    <!-- <script src="pageChange.js"></script> -->
</head>
 
<body>
    <div class="control">
        <div class="item">
            <div class="active">登錄</div>
            <div>註冊</div>
        </div>
        <div class="content">
            <div style="display: block;" class="box1">
                <p>賬號</p>
                <input type="text" placeholder="username" name="use2" />
                <span></span>
                <p>密碼</p>
                <input type="password" placeholder="password" name="use2" />
                <span></span>
                <br/>
                <input type="submit" value="登錄" />
            </div>
            <div class="box2">
                <p>用戶名</p>
                <input type="text" placeholder="username" name="use1" />
                <span>請輸入以字母開頭至少4位數用戶名</span>
                <p>密碼</p>
                <input type="password" placeholder="password" name="use1" />
                <span>請輸入至少六位數的密碼</span>
                <p>郵箱</p>
                <input type="text" placeholder="email" name="use1" />
                <span>請輸入郵箱賬號</span>
                <br/>
                <input type="submit" value="註冊" />
            </div>
        </div>
    </div>
</body>
 
</html>

<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .error {
        color: red;
        font-size: 14px;
 
    }
 
    .cg {
        color: greenyellow;
        font-size: 14px;
    }
 
    body {
        background: #f3f3f3;
    }
 
    .control {
        width: 340px;
        background: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
    }
 
    .item {
        width: 340px;
        height: 60px;
        background: #eeeeee;
    }
 
    .item div {
        width: 167px;
        height: 60px;
        display: inline-block;
        color: black;
        font-size: 18px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
    }
 
    .content {
        width: 100%;
    }
 
    .content div {
        margin: 20px 30px;
        display: none;
        text-align: left;
    }
 
    p {
        color: #4a4a4a;
        margin-top: 30px;
        margin-bottom: 6px;
        font-size: 15px;
    }
 
    .content input[type="text"],
    .content input[type="password"] {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #adadad;
        padding: 0 10px;
        box-sizing: border-box;
    }
 
    .content input[type="submit"] {
        margin-top: 40px;
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: 1px solid #adadad;
        background: #00dd60;
        cursor: pointer;
        letter-spacing: 4px;
        margin-bottom: 40px;
    }
 
    .active {
        background: white;
    }
 
    .item div:hover {
        background: #f6f6f6;
    }
</style>
 
<script>
 
    window.onload = function () {
        var item = document.querySelectorAll(".item");
        var it = item[0].querySelectorAll("div")
        var content = document.querySelectorAll(".content");
        var con = content[0].querySelectorAll("div");
        var na1 = document.querySelectorAll('[name="use1"]')
        var na2 = document.querySelectorAll('[name="use2"]')
        var span1 = document.querySelectorAll('.box2 span')
        var span2 = document.querySelectorAll('.box1 span')
        var zc = document.querySelector('[value="註冊"]')
        var dl = document.querySelector('[value="登錄"]')
 
        console.log(span2)
        var userReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
        var telReg = /^[0-9a-zA-Z].{4,14}$/
        var emailReg = /(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)|(^[1-9]\d{4,10}@qq\.com$)/
 
        for (let i = 0; i < it.length; i++) {
            it[i].onclick = function () {
                for (let j = 0; j < it.length; j++) {
                    it[j].className = '';
                    con[j].style.display = "none";
                }
                this.className = "active";
                it[i].index = i;
                con[i].style.display = "block";
            }
        }
        
        var flag = false
 
        // 封裝
        function cf(trr, srnr, index, str, str1) {
            var a1 = trr.test(srnr)
            if (!a1) {
                index.className = 'error'
                index.innerText = str
                return true
            } else {
                index.className = 'cg'
                index.innerText = str1
                return false
 
            }
 
        }
        // 正則驗證
        na1[0].oninput = () => cf(userReg, na1[0].value, span1[0], 'x 用戶名不符合規范', '√ 通過驗證')
 
        na1[1].oninput = () => cf(telReg, na1[1].value, span1[1], 'x 密碼不符合規范', '√ 通過驗證')
 
        na1[2].oninput = () => cf(emailReg, na1[2].value, span1[2], 'x 郵箱書寫不符合規范', '√ 通過驗證')
 
        var arr=[]
        zc.onclick = () => {
            flag = true
            if (na1[0].value === '') {
                span1[0].className = 'error'
                return flag = false
            }
            else if (na1[1].value === '') {
                span1[1].className = 'error'
                return flag = false
            }
            else if (na1[2].value === '' || span1[2].className == 'error') {
                span1[2].className = 'error'
                return flag = false
            } else {
                if (flag && na1[2].className != 'error') { 
 
                    // for (let i = 0; i < na1.length; i++) {
                    //     // arr[i]=arr.push(na1[i].)
                    //     console.log(arr[i])
                    //     na1[i].value = ''                       
                    // }
                    alert('註冊成功')
                }
            }
        }
 
        dl.onclick = function () {
            if (na1[0].value != na2[0].value || na1[0].value == '') {
                span2[0].className = 'error'
                span2[0].innerText = '用戶名不一致'
            } else {
                span2[0].innerText = ''
                span2[0].className = ''
            }
            if (na1[1].value === '' || na1[1].value != na2[1].value) {
                span2[1].className = 'error'
                span2[1].innerText = '密碼錯誤'
            } else {
                span2[1].innerText = ''
                span2[1].className = ''
            }
            if (flag) {
                alert('登錄成功')
            }
            else if(na1[0].value != na2[0].value&& na1[1].value != na2[1].value) {
                
                alert('賬號不存在')
            }     
        }
    }
</script>

效果

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：