快捷導(dǎo)航

使用JavaScript執(zhí)行表單驗證的方法

更新時間：2024年11月14日 11:23:32 作者：DTcode7

在Web前端開發(fā)中,表單驗證是一個常見的任務(wù),用于確保用戶輸入的數(shù)據(jù)符合預(yù)期的要求,通過使用JavaScript,可以實現(xiàn)強(qiáng)大的表單驗證功能,提升用戶體驗和數(shù)據(jù)的可靠性,本文將詳細(xì)介紹如何使用JavaScript執(zhí)行表單驗證,包括基本概念、作用說明、實現(xiàn)方法和實際開發(fā)中的使用技巧

表單驗證的基本概念

什么是表單驗證？

表單驗證是指在用戶提交表單之前，通過檢查用戶輸入的數(shù)據(jù)是否符合預(yù)定義的規(guī)則，來確保數(shù)據(jù)的完整性和準(zhǔn)確性。常見的驗證規(guī)則包括必填字段、數(shù)據(jù)類型、長度限制、格式匹配等。

表單驗證的作用

提高數(shù)據(jù)質(zhì)量：確保用戶輸入的數(shù)據(jù)符合預(yù)期的要求，減少無效數(shù)據(jù)的提交。
提升用戶體驗：及時反饋用戶輸入的錯誤，避免用戶多次提交無效表單。
減輕服務(wù)器壓力：在客戶端進(jìn)行初步驗證，減少無效請求對服務(wù)器的壓力。

使用 JavaScript 執(zhí)行表單驗證的方法

方法一：使用原生 JavaScript

通過原生JavaScript，可以直接操作DOM元素，實現(xiàn)簡單的表單驗證。

示例一：驗證必填字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證示例一</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username">
        <span id="usernameError" style="color: red;"></span><br>

        <label for="email">郵箱:</label>
        <input type="email" id="email" name="email">
        <span id="emailError" style="color: red;"></span><br>

        <button type="button" onclick="validateForm()">提交</button>
    </form>

    <script>
        function validateForm() {
            let isValid = true;

            // 驗證用戶名
            const username = document.getElementById('username').value;
            const usernameError = document.getElementById('usernameError');
            if (username.trim() === '') {
                usernameError.textContent = '用戶名不能為空';
                isValid = false;
            } else {
                usernameError.textContent = '';
            }

            // 驗證郵箱
            const email = document.getElementById('email').value;
            const emailError = document.getElementById('emailError');
            if (email.trim() === '') {
                emailError.textContent = '郵箱不能為空';
                isValid = false;
            } else if (!isValidEmail(email)) {
                emailError.textContent = '郵箱格式不正確';
                isValid = false;
            } else {
                emailError.textContent = '';
            }

            if (isValid) {
                alert('表單提交成功');
                document.getElementById('myForm').reset();
            }
        }

        function isValidEmail(email) {
            const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return regex.test(email);
        }
    </script>
</body>
</html>

方法二：使用 HTML5 內(nèi)置屬性

HTML5 提供了一些內(nèi)置屬性，如 required、pattern、min、max 等，可以直接在表單元素上使用，簡化驗證邏輯。

示例二：使用 HTML5 內(nèi)置屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證示例二</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username" required minlength="3" maxlength="20"><br>

        <label for="email">郵箱:</label>
        <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><br>

        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();

            const form = event.target;
            if (form.checkValidity()) {
                alert('表單提交成功');
                form.reset();
            } else {
                form.reportValidity();
            }
        });
    </script>
</body>
</html>

方法三：使用 jQuery 插件

jQuery 是一個流行的JavaScript庫，提供了豐富的插件生態(tài)，可以簡化表單驗證的實現(xiàn)。

示例三：使用 jQuery Validation 插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證示例三</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username" required minlength="3" maxlength="20"><br>

        <label for="email">郵箱:</label>
        <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><br>

        <button type="submit">提交</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#myForm').validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 3,
                        maxlength: 20
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    username: {
                        required: '用戶名不能為空',
                        minlength: '用戶名至少需要3個字符',
                        maxlength: '用戶名最多20個字符'
                    },
                    email: {
                        required: '郵箱不能為空',
                        email: '郵箱格式不正確'
                    }
                },
                submitHandler: function(form) {
                    alert('表單提交成功');
                    form.reset();
                }
            });
        });
    </script>
</body>
</html>

方法四：使用正則表達(dá)式

正則表達(dá)式是一種強(qiáng)大的文本匹配工具，可以用于復(fù)雜的驗證規(guī)則，如電話號碼、郵政編碼等。

示例四：使用正則表達(dá)式驗證電話號碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證示例四</title>
</head>
<body>
    <form id="myForm">
        <label for="phone">電話號碼:</label>
        <input type="text" id="phone" name="phone">
        <span id="phoneError" style="color: red;"></span><br>

        <button type="button" onclick="validateForm()">提交</button>
    </form>

    <script>
        function validateForm() {
            const phone = document.getElementById('phone').value;
            const phoneError = document.getElementById('phoneError');
            const regex = /^1[3-9]\d{9}$/;

            if (!regex.test(phone)) {
                phoneError.textContent = '電話號碼格式不正確';
            } else {
                phoneError.textContent = '';
                alert('表單提交成功');
                document.getElementById('myForm').reset();
            }
        }
    </script>
</body>
</html>

方法五：使用自定義函數(shù)

對于復(fù)雜的驗證邏輯，可以編寫自定義函數(shù)來處理特定的驗證需求。

示例五：使用自定義函數(shù)驗證密碼強(qiáng)度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單驗證示例五</title>
</head>
<body>
    <form id="myForm">
        <label for="password">密碼:</label>
        <input type="password" id="password" name="password">
        <span id="passwordError" style="color: red;"></span><br>

        <button type="button" onclick="validateForm()">提交</button>
    </form>

    <script>
        function validateForm() {
            const password = document.getElementById('password').value;
            const passwordError = document.getElementById('passwordError');

            if (!isStrongPassword(password)) {
                passwordError.textContent = '密碼強(qiáng)度不足';
            } else {
                passwordError.textContent = '';
                alert('表單提交成功');
                document.getElementById('myForm').reset();
            }
        }

        function isStrongPassword(password) {
            const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
            return regex.test(password);
        }
    </script>
</body>
</html>

不同角度的功能使用思路

多步驟表單驗證

在復(fù)雜的表單中，可以將驗證邏輯拆分為多個步驟，逐步引導(dǎo)用戶完成表單填寫。

示例六：多步驟表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多步驟表單驗證示例</title>
</head>
<body>
    <form id="multiStepForm">
        <div id="step1">
            <label for="username">用戶名:</label>
            <input type="text" id="username" name="username" required minlength="3" maxlength="20"><br>
            <button type="button" onclick="nextStep(1)">下一步</button>
        </div>
        <div id="step2" style="display: none;">
            <label for="email">郵箱:</label>
            <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><br>
            <button type="button" onclick="prevStep(1)">上一步</button>
            <button type="button" onclick="nextStep(2)">下一步</button>
        </div>
        <div id="step3" style="display: none;">
            <label for="phone">電話號碼:</label>
            <input type="text" id="phone" name="phone" required pattern="^1[3-9]\d{9}$"><br>
            <button type="button" onclick="prevStep(2)">上一步</button>
            <button type="button" onclick="submitForm()">提交</button>
        </div>
    </form>

    <script>
        function nextStep(step) {
            const form = document.getElementById('multiStepForm');
            const currentStep = document.getElementById(`step${step}`);
            const nextStep = document.getElementById(`step${step + 1}`);

            if (validateStep(currentStep)) {
                currentStep.style.display = 'none';
                nextStep.style.display = 'block';
            }
        }

        function prevStep(step) {
            const currentStep = document.getElementById(`step${step + 1}`);
            const prevStep = document.getElementById(`step${step}`);

            currentStep.style.display = 'none';
            prevStep.style.display = 'block';
        }

        function validateStep(step) {
            const inputs = step.querySelectorAll('input');
            for (const input of inputs) {
                if (!input.validity.valid) {
                    input.reportValidity();
                    return false;
                }
            }
            return true;
        }

        function submitForm() {
            const form = document.getElementById('multiStepForm');
            if (form.checkValidity()) {
                alert('表單提交成功');
                form.reset();
            } else {
                form.reportValidity();
            }
        }
    </script>
</body>
</html>

實時驗證

通過監(jiān)聽輸入事件，實現(xiàn)實時驗證，及時反饋用戶輸入的錯誤。

示例七：實現(xiàn)實時驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>實現(xiàn)實時驗證示例</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用戶名:</label>
        <input type="text" id="username" name="username" required minlength="3" maxlength="20">
        <span id="usernameError" style="color: red;"></span><br>

        <label for="email">郵箱:</label>
        <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
        <span id="emailError" style="color: red;"></span><br>

        <button type="button" onclick="validateForm()">提交</button>
    </form>

    <script>
        function validateInput(input, errorSpan, regex, message) {
            const value = input.value.trim();
            if (value === '') {
                errorSpan.textContent = `${input.name}不能為空`;
            } else if (!regex.test(value)) {
                errorSpan.textContent = message;
            } else {
                errorSpan.textContent = '';
            }
        }

        document.getElementById('username').addEventListener('input', function() {
            const username = this;
            const usernameError = document.getElementById('usernameError');
            const regex = /^.{3,20}$/;
            validateInput(username, usernameError, regex, '用戶名長度應(yīng)在3到20個字符之間');
        });

        document.getElementById('email').addEventListener('input', function() {
            const email = this;
            const emailError = document.getElementById('emailError');
            const regex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
            validateInput(email, emailError, regex, '郵箱格式不正確');
        });

        function validateForm() {
            const username = document.getElementById('username');
            const email = document.getElementById('email');
            const usernameError = document.getElementById('usernameError');
            const emailError = document.getElementById('emailError');

            if (usernameError.textContent || emailError.textContent) {
                return;
            }

            alert('表單提交成功');
            document.getElementById('myForm').reset();
        }
    </script>
</body>
</html>