快捷導(dǎo)航

前端利用正則表達(dá)式來(lái)注冊(cè)或登錄表單的驗(yàn)證示例代碼

更新時(shí)間：2025年05月19日 08:49:25 作者：虛擬現(xiàn)實(shí)旅人

這篇文章主要給大家介紹了關(guān)于前端利用正則表達(dá)式來(lái)注冊(cè)或登錄表單的驗(yàn)證,文中通過(guò)代碼介紹了用戶名、密碼、手機(jī)號(hào)、郵箱的格式校驗(yàn)及錯(cuò)誤提示,通過(guò)JavaScript在提交時(shí)逐項(xiàng)檢查,確保數(shù)據(jù)有效性,需要的朋友可以參考下

簡(jiǎn)介

在網(wǎng)頁(yè)的注冊(cè)或者登錄頁(yè)面中，進(jìn)行表單驗(yàn)證是我們能否進(jìn)入該網(wǎng)頁(yè)的關(guān)鍵步驟。今天通過(guò)一個(gè)簡(jiǎn)單的示例，利用正則表達(dá)式來(lái)進(jìn)行表單驗(yàn)證以及在用戶提交時(shí)進(jìn)行相應(yīng)的錯(cuò)誤提示。

1.HTML部分

在HTML部分中，將構(gòu)建一個(gè)基本的注冊(cè)表單，包含用戶名、密碼、確認(rèn)密碼、手機(jī)號(hào)和郵箱輸入框。HTML表單使用了<form>標(biāo)簽，并將數(shù)據(jù)提交到服務(wù)器（這里只是一個(gè)示例URL，實(shí)際開(kāi)發(fā)中應(yīng)根據(jù)需求填寫(xiě)）。

<form action="http://httpbin.org/post" method="post">
    <div class="row">
        登錄賬號(hào)：<input type="text" name="username" placeholder="請(qǐng)輸入3-16位之間的賬號(hào)">
        <div class="username-tips"></div>
    </div>
    <div class="row">
        登錄密碼：<input type="password" name="password" placeholder="請(qǐng)輸入6-16位之間的密碼">
        <div class="password-tips"></div>
    </div>
    <div class="row">
        確認(rèn)密碼：<input type="password" name="password2" placeholder="請(qǐng)?jiān)俅屋斎氲卿浢艽a">
        <div class="password2-tips"></div>
    </div>
    <div class="row">
        手機(jī)號(hào)碼：<input type="text" name="mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)碼">
        <div class="mobile-tips"></div>
    </div>
    <div class="row">
        注冊(cè)郵箱：<input type="email" name="email" placeholder="請(qǐng)輸入郵箱地址">
        <div class="email-tips"></div>
    </div>
    <input type="submit" value="注冊(cè)">
</form>

1.username (賬號(hào))：用于輸入用戶名，要求長(zhǎng)度在3到16個(gè)字符之間。
2.password (密碼)：用于輸入密碼，要求長(zhǎng)度在6到16個(gè)字符之間。
3.password2 (確認(rèn)密碼)：再次輸入密碼以確認(rèn)一致。
4.mobile (手機(jī)號(hào)碼)：要求輸入有效的手機(jī)號(hào)碼，符合中國(guó)大陸的手機(jī)號(hào)碼格式。
5.email (郵箱)：要求輸入有效的郵箱地址。
6.在每個(gè)輸入框下方都有一個(gè)<div>元素，用于顯示與該輸入框相關(guān)的錯(cuò)誤提示信息。類名如.username-tips、.password-tips等，用來(lái)標(biāo)識(shí)對(duì)應(yīng)的錯(cuò)誤提示內(nèi)容。

2.CSS部分

.row {
    height: 42px;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
}

.username-tips, .password-tips, .password2-tips, .mobile-tips, .email-tips {
    color: red;
    font-size: 12px;
}

.row：為每個(gè)表單行設(shè)置了固定的高度，并給每行添加一個(gè)下邊框。
.username-tips等：設(shè)置了錯(cuò)誤提示的文本顏色為紅色，并設(shè)置字體大小為12px，確保提示信息清晰可見(jiàn)。

3.JavaScript部分

這部分是代碼的核心，用JavaScript來(lái)對(duì)用戶輸入的數(shù)據(jù)進(jìn)行驗(yàn)證。在提交表單前，我們會(huì)檢查每個(gè)字段是否符合要求。如果某一項(xiàng)不符合要求，表單提交會(huì)被阻止，同時(shí)顯示對(duì)應(yīng)的錯(cuò)誤提示。

驗(yàn)證邏輯：

1.驗(yàn)證用戶名：長(zhǎng)度要求在3到16個(gè)字符之間。

2.驗(yàn)證密碼：長(zhǎng)度要求在6到16個(gè)字符之間。

3.驗(yàn)證確認(rèn)密碼：確保密碼和確認(rèn)密碼一致。

4.驗(yàn)證手機(jī)號(hào)：使用正則表達(dá)式檢查手機(jī)號(hào)格式是否正確。

5.驗(yàn)證郵箱地址：使用正則表達(dá)式檢查郵箱格式是否有效。

var username = document.querySelector('input[name="username"]');
var password = document.querySelector('input[name="password"]');
var password2 = document.querySelector('input[name="password2"]');
var mobile = document.querySelector('input[name="mobile"]');
var email = document.querySelector('input[name="email"]');
var submit = document.querySelector('input[type="submit"]');

username.onfocus = function() {
    document.querySelector('.username-tips').innerHTML = "";
};

submit.onclick = function() {
    let uv = username.value;
    let pv = password.value;
    let pv2 = password2.value;
    let mv = mobile.value;
    let ev = email.value;

    // 校驗(yàn)賬號(hào)
    if (uv.length < 3 || uv.length > 16) {
        document.querySelector('.username-tips').innerHTML = "請(qǐng)輸入3-16位之間的賬號(hào)!";
        return false;
    }

    // 校驗(yàn)密碼
    if (pv.length < 6 || pv.length > 16) {
        document.querySelector('.password-tips').innerHTML = "請(qǐng)輸入6-16位之間的密碼!";
        return false;
    }

    // 校驗(yàn)確認(rèn)密碼
    if (pv !== pv2) {
        document.querySelector('.password2-tips').innerHTML = "登錄密碼與確認(rèn)密碼必須一致！";
        return false;
    }

    // 驗(yàn)證手機(jī)號(hào)
    if (!/^1[3-9]\d{9}$/.test(mv)) {
        document.querySelector('.mobile-tips').innerHTML = "手機(jī)號(hào)碼格式有誤！";
        return false;
    }

    // 驗(yàn)證郵箱格式
    if (!/^\w+@\w+\.\w+$/.test(ev)) {
        document.querySelector('.email-tips').innerHTML = "注冊(cè)郵箱格式有誤！";
        return false;
    }
}

1.我們首先定義了表單中的各個(gè)輸入框和提交按鈕的引用。
2.當(dāng)用戶點(diǎn)擊輸入框時(shí)，我們清空相應(yīng)的錯(cuò)誤提示。
3.提交表單時(shí)，使用onclick事件處理函數(shù)對(duì)用戶輸入的數(shù)據(jù)進(jìn)行逐項(xiàng)驗(yàn)證：
用戶名、密碼、確認(rèn)密碼、手機(jī)號(hào)和郵箱都必須符合特定的規(guī)則。如果驗(yàn)證失敗，錯(cuò)誤提示將會(huì)顯示在相應(yīng)的<div>中。
如果所有驗(yàn)證都通過(guò)，表單才會(huì)提交。

運(yùn)行結(jié)果

校驗(yàn)賬號(hào)錯(cuò)誤

校驗(yàn)密碼錯(cuò)誤

校驗(yàn)手機(jī)號(hào)碼錯(cuò)誤

校驗(yàn)注冊(cè)郵箱錯(cuò)誤

提交成功

完整代碼

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .row{
        height: 42px;
        border-bottom: 1px solid #aaa;
        margin-bottom: 10px;
    }
    .username-tips, .password-tips, .password2-tips, .mobile-tips, .email-tips{
        color: red;
        font-size: 12px;
    }
    </style>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
    <div class="row">
        登錄賬號(hào)：<input type="text" name="username" placeholder="請(qǐng)輸入3-16位之間的賬號(hào)">
        <div class="username-tips"></div>
    </div>
    <div class="row">
        登錄密碼：<input type="password" name="password" placeholder="請(qǐng)輸入6-16位之間的密碼">
        <div class="password-tips"></div>
    </div>
    <div class="row">
        確認(rèn)密碼：<input type="password" name="password2" placeholder="請(qǐng)?jiān)俅屋斎氲卿浢艽a">
        <div class="password2-tips"></div>
    </div>
    <div class="row">
        手機(jī)號(hào)碼：<input type="text" name="mobile" placeholder="請(qǐng)輸入手機(jī)號(hào)碼">
        <div class="mobile-tips"></div>
    </div>
    <div class="row">
        注冊(cè)郵箱：<input type="email" name="email" placeholder="請(qǐng)輸入郵箱地址">
        <div class="email-tips"></div>
    </div>
    <input type="submit" value="注冊(cè)">
</form>
<script>
    // 在2種情況下，進(jìn)行數(shù)據(jù)驗(yàn)證
    // 用戶輸入完以后驗(yàn)證
    var username = document.querySelector('input[name="username"]')
    var password = document.querySelector('input[name="password"]')
    var password2 = document.querySelector('input[name="password2"]')
    var mobile = document.querySelector('input[name="mobile"]')
    var email = document.querySelector('input[name="email"]')
    var submit = document.querySelector('input[type="submit"]');

    username.onfocus = function(){
        // 當(dāng)輸入光標(biāo)進(jìn)入當(dāng)前輸入框會(huì)觸發(fā)onfocus事件，去除錯(cuò)誤提示
        document.querySelector('.username-tips').innerHTML = "";
    }

    submit.onclick = function(){
        let uv = username.value
        let pv = password.value
        let pv2 = password2.value
        let mv = mobile.value
        let ev = email.value
        // 校驗(yàn)賬號(hào)
        if(uv.length<3 || uv.length>16){
            document.querySelector('.username-tips').innerHTML = "請(qǐng)輸入3-16位之間的賬號(hào)!"
            return false;
        }

        // 校驗(yàn)密碼
        if(pv.length<6 || pv.length > 16){
            document.querySelector('.password-tips').innerHTML = "請(qǐng)輸入6-16位之間的密碼!"
            return false;
        }

        // 校驗(yàn)確認(rèn)密碼
        if(pv!=pv2){
            document.querySelector('.password2-tips').innerHTML = "登錄密碼與確認(rèn)密碼必須一致！"
            return false;
        }

        // 驗(yàn)證手機(jī)號(hào)
        if(!/^1[3-9]\d{9}$/.test(mv)){
            document.querySelector('.mobile-tips').innerHTML = "手機(jī)號(hào)碼格式有誤！"
            return false;
        }

        // 驗(yàn)證郵箱格式
        // 1@qq.com
        // 123213@qq.com
        if(!/^\w+@\w+\.\w+$/.test(ev)){
            document.querySelector('.email-tips').innerHTML = "注冊(cè)郵箱格式有誤！"
            return false;
        }
        
    }
</script>
</body>
</html>

總結(jié)

到此這篇關(guān)于前端利用正則表達(dá)式來(lái)注冊(cè)或登錄表單的驗(yàn)證的文章就介紹到這了,更多相關(guān)前端正則注冊(cè)登錄表單的驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: