快捷導(dǎo)航

基于 jQuery實(shí)現(xiàn)靈活可配置的輸入框驗(yàn)證功能(最新推薦)

更新時(shí)間：2025年05月06日 10:39:34 作者：Enti7c

本文將介紹如何使用 HTML、CSS 和 jQuery 構(gòu)建一個(gè)可靈活配置的輸入框驗(yàn)證系統(tǒng),輕松應(yīng)對(duì)不同類型的驗(yàn)證需求,感興趣的朋友一起看看吧

在 Web 表單開發(fā)中，輸入框驗(yàn)證是保障數(shù)據(jù)準(zhǔn)確性和安全性的關(guān)鍵環(huán)節(jié)。無(wú)論是用戶注冊(cè)、信息提交還是數(shù)據(jù)錄入場(chǎng)景，都需要對(duì)用戶輸入內(nèi)容進(jìn)行合法性檢查。本文將介紹如何使用 HTML、CSS 和 jQuery 構(gòu)建一個(gè)可靈活配置的輸入框驗(yàn)證系統(tǒng)，輕松應(yīng)對(duì)不同類型的驗(yàn)證需求。

一、功能概述與應(yīng)用場(chǎng)景

該輸入框驗(yàn)證系統(tǒng)支持以下核心功能：

多類型驗(yàn)證：可對(duì)用戶名、電話、密碼等不同字段設(shè)置獨(dú)立的驗(yàn)證規(guī)則，如長(zhǎng)度限制、格式匹配等。
實(shí)時(shí)反饋：用戶輸入時(shí)實(shí)時(shí)檢查，輸入不符合要求時(shí)立即顯示錯(cuò)誤提示。
提交前驗(yàn)證：在表單提交時(shí)自動(dòng)校驗(yàn)所有字段，確保數(shù)據(jù)完整合法。

適用于用戶注冊(cè)表單、訂單填寫、信息修改等各類需要輸入數(shù)據(jù)校驗(yàn)的業(yè)務(wù)場(chǎng)景。

效果圖：

二、HTML 結(jié)構(gòu)搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>輸入框驗(yàn)證</title>
    <style>
        /* 樣式代碼將在下文CSS部分詳細(xì)說(shuō)明 */
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="form-container">
        <h2>輸入框驗(yàn)證</h2>
        <div class="form-group">
            <label for="username">用戶名：</label>
            <input type="text" id="username" autocomplete="off">
            <div class="error-message" id="usernameError"></div>
        </div>
        <div class="form-group">
            <label for="tel">電話：</label>
            <input type="text" id="tel">
            <div class="error-message" id="telError"></div>
        </div>
        <div class="form-group">
            <label for="password">密碼：</label>
            <input type="password" id="password">
            <div class="error-message" id="passwordError"></div>
        </div>
        <div class="form-group">
            <label for="address">地址：</label>
            <input type="text" id="address">
            <div class="error-message" id="addressError"></div>
        </div>
        <div class="form-group">
            <label for="industry">行業(yè)：</label>
            <input type="text" id="industry">
            <div class="error-message" id="industryError"></div>
        </div>
        <div class="form-group">
            <label for="scol">學(xué)校：</label>
            <input type="text" id="scol">
            <div class="error-message" id="scolError"></div>
        </div>
        <button id="submitButton">提交</button>
    </div>
    <script>
        // JavaScript實(shí)現(xiàn)代碼將在下文JavaScript部分詳細(xì)說(shuō)明
    </script>
</body>
</html>

HTML 代碼構(gòu)建了表單的基礎(chǔ)結(jié)構(gòu)：

外層div（類名form-container）作為表單容器，提供統(tǒng)一的樣式和布局。
每個(gè)form-group包裹一個(gè)輸入字段，包含label標(biāo)簽、input輸入框和用于顯示錯(cuò)誤信息的div（類名error-message）。
submitButton按鈕用于觸發(fā)表單提交和整體驗(yàn)證邏輯。

三、CSS 樣式設(shè)計(jì)

.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
    margin-bottom: 15px;
    height: 60px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
}
.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.form-group input.error {
    border-color: #ff0000;
}
.error-message {
    color: #ff0000;
    font-size: 12px;
}
button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}
button:hover {
    background-color: #0056b3;
}

CSS 代碼為表單賦予了美觀且實(shí)用的樣式：

form-container設(shè)置了白色背景、圓角邊框和陰影效果，增強(qiáng)視覺(jué)吸引力。
form-group定義了每個(gè)輸入組的間距和高度，確保布局整齊。
為input元素設(shè)置默認(rèn)樣式，當(dāng)添加error類時(shí)（驗(yàn)證失敗），邊框變?yōu)榧t色以提示用戶。
error-message定義錯(cuò)誤提示文字的顏色和字體大小，button設(shè)置提交按鈕的背景色、交互效果等。

四、jQuery 功能實(shí)現(xiàn)

$(function () {
    const $form = $('.form-container');
    const $inputs = $form.find('input[type="text"], input[type="password"]');
    const inputs = $inputs.map(function () {
        const $input = $(this);
        const id = $input.attr('id');
        const $error = $(`#${id}Error`);
        const label = $form.find(`label[for="${id}"]`).text().replace('：', '');
        let validationRule;
        let errorMessage;
        switch (id) {
            case 'username':
                validationRule = (value) => $.trim(value).length >= 3;
                errorMessage = `${label}長(zhǎng)度不能少于3個(gè)字符`;
                break;
            case 'tel':
                validationRule = (value) => /^\d{11}$/.test($.trim(value));
                errorMessage = `${label}必須為11位數(shù)字`;
                break;
            case 'password':
                validationRule = (value) => $.trim(value).length >= 6;
                errorMessage = `${label}長(zhǎng)度不能少于6個(gè)字符`;
                break;
            case 'address':
                validationRule = (value) => $.trim(value)!== '';
                errorMessage = `${label}不能為空`;
                break;
            case'scol':
                validationRule = (value) => $.trim(value)!== '';
                errorMessage = `${label}名稱不能為空`;
                break;
            default:
                validationRule = (value) => $.trim(value)!== '';
                errorMessage = `${label}不能為空`;
        }
        return {
            input: $input,
            error: $error,
            validationRule,
            errorMessage
        };
    }).get();
    function validateInput(inputData) {
        const { input, error, validationRule, errorMessage } = inputData;
        error.text('');
        input.removeClass('error');
        const value = input.val();
        if (!validationRule(value)) {
            error.text(errorMessage);
            input.addClass('error');
            return false;
        }
        return true;
    }
    $inputs.on('change', function () {
        const inputData = inputs.find(item => item.input.is(this));
        if (inputData) {
            validateInput(inputData);
        }
    });
    $('#submitButton').on('click', function () {
        let isValid = true;
        inputs.forEach(inputData => {
            if (!validateInput(inputData)) {
                isValid = false;
            }
        });
        if (isValid) {
            alert('輸入驗(yàn)證成功！');
        }
    });
});

JavaScript 代碼通過(guò) jQuery 實(shí)現(xiàn)了核心驗(yàn)證邏輯：

初始化配置：
提取所有文本和密碼輸入框，為每個(gè)輸入框創(chuàng)建包含驗(yàn)證規(guī)則、錯(cuò)誤提示信息、輸入元素和錯(cuò)誤顯示元素的配置對(duì)象。
使用switch語(yǔ)句根據(jù)輸入框id設(shè)置不同的驗(yàn)證規(guī)則和錯(cuò)誤提示，支持自定義擴(kuò)展。
單個(gè)驗(yàn)證函數(shù)：validateInput函數(shù)負(fù)責(zé)執(zhí)行單個(gè)輸入框的驗(yàn)證，清空錯(cuò)誤信息、移除錯(cuò)誤樣式，根據(jù)驗(yàn)證規(guī)則判斷輸入是否合法，若不合法則顯示錯(cuò)誤提示并添加錯(cuò)誤樣式。
實(shí)時(shí)驗(yàn)證：為輸入框綁定change事件，用戶輸入內(nèi)容變化時(shí)立即觸發(fā)驗(yàn)證，提供即時(shí)反饋。
提交驗(yàn)證：為提交按鈕綁定click事件，遍歷所有輸入框進(jìn)行驗(yàn)證，只有當(dāng)所有輸入框都通過(guò)驗(yàn)證時(shí)，才提示驗(yàn)證成功。

五、擴(kuò)展與使用說(shuō)明

新增驗(yàn)證字段：只需在 HTML 中添加form-group結(jié)構(gòu)，并在 JavaScript 的switch語(yǔ)句中增加對(duì)應(yīng)case配置驗(yàn)證規(guī)則和錯(cuò)誤提示。
修改驗(yàn)證邏輯：直接調(diào)整validationRule函數(shù)內(nèi)的判斷條件，如修改長(zhǎng)度限制、正則表達(dá)式等。
國(guó)際化支持：通過(guò)修改errorMessage文本內(nèi)容，可輕松實(shí)現(xiàn)多語(yǔ)言錯(cuò)誤提示。

通過(guò)以上代碼和配置，開發(fā)者可以快速搭建功能強(qiáng)大的輸入框驗(yàn)證系統(tǒng)，有效提升表單數(shù)據(jù)質(zhì)量和用戶體驗(yàn)。

到此這篇關(guān)于基于 jQuery 實(shí)現(xiàn)靈活可配置的輸入框驗(yàn)證功能的文章就介紹到這了,更多相關(guān)jquery輸入框驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: