使用JavaScript执行表单验证的方法

更新时间：2024年11月14日 11:23:32 作者：DTcode7

在Web前端开发中,表单验证是一个常见的任务,用于确保用户输入的数据符合预期的要求,通过使用JavaScript,可以实现强大的表单验证功能,提升用户体验和数据的可靠性,本文将详细介绍如何使用JavaScript执行表单验证,包括基本概念、作用说明、实现方法和实际开发中的使用技巧

表单验证的基本概念

什么是表单验证？

表单验证是指在用户提交表单之前，通过检查用户输入的数据是否符合预定义的规则，来确保数据的完整性和准确性。常见的验证规则包括必填字段、数据类型、长度限制、格式匹配等。

表单验证的作用

提高数据质量：确保用户输入的数据符合预期的要求，减少无效数据的提交。
提升用户体验：及时反馈用户输入的错误，避免用户多次提交无效表单。
减轻服务器压力：在客户端进行初步验证，减少无效请求对服务器的压力。

使用 JavaScript 执行表单验证的方法

方法一：使用原生 JavaScript

通过原生JavaScript，可以直接操作DOM元素，实现简单的表单验证。

示例一：验证必填字段

<!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 内置属性

HTML5 提供了一些内置属性，如 required、pattern、min、max 等，可以直接在表单元素上使用，简化验证逻辑。

示例二：使用 HTML5 内置属性

<!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库，提供了丰富的插件生态，可以简化表单验证的实现。

示例三：使用 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>

方法四：使用正则表达式

正则表达式是一种强大的文本匹配工具，可以用于复杂的验证规则，如电话号码、邮政编码等。

示例四：使用正则表达式验证电话号码

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

方法五：使用自定义函数

对于复杂的验证逻辑，可以编写自定义函数来处理特定的验证需求。

示例五：使用自定义函数验证密码强度

<!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 = '密码强度不足';
            } 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>

不同角度的功能使用思路

多步骤表单验证

在复杂的表单中，可以将验证逻辑拆分为多个步骤，逐步引导用户完成表单填写。

示例六：多步骤表单验证

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

实时验证

通过监听输入事件，实现实时验证，及时反馈用户输入的错误。

示例七：实现实时验证

<!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">
        <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, '用户名长度应在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>

实际开发中的注意事项

在实际的Web前端开发中，合理地使用表单验证可以带来许多好处，但也需要注意以下几点：

用户体验：及时反馈用户输入的错误，避免用户多次提交无效表单。
兼容性：确保验证逻辑在不同的浏览器和设备上都能正常运行。
安全性：客户端验证只是初步检查，服务器端仍需进行二次验证，确保数据的安全性。
性能：避免过度复杂的验证逻辑，影响页面的加载和响应速度。

总之，表单验证是Web前端开发中的一个重要环节，通过合理地使用JavaScript，可以有效地提升用户体验和数据的可靠性。希望本文提供的信息能帮助你在未来的项目中更好地实现表单验证功能。

以上就是使用JavaScript执行表单验证的方法的详细内容，更多关于JavaScript执行表单验证的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript前端无法获取响应头原因与解决方案
这篇文章主要为大家详细介绍了JavaScript前端无法获取响应头原因与解决方案,如 Content-Disposition,下面小编就来和大家详细介绍一下吧
2025-08-08
使用Web Uploader实现多文件上传
这篇文章主要介绍了使用Web Uploader实现多文件上传的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
利用uni-app和uView实现多图上传功能全过程
最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
JS实现的Select三级下拉菜单代码
这篇文章主要介绍了JS实现的Select三级下拉菜单,涉及javascript动态创建下拉列表的技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
JS实现点击登录弹出窗口同时背景色渐变动画效果
这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下
2016-03-03
js随机生成26个大小写字母
这篇文章主要为大家详细介绍了javascript随机生成26个大小写字母，感兴趣的朋友可以参考一下
2016-02-02
Javacript中自定义的map.js 的方法
以下map.js和map-util.js都是自定义的map，任选其一就可以。你可以用它来像java里new Map()和put()、remove()、get()等方法
2017-11-11
JavaScript实现从数组中选出和等于固定值的n个数
这篇文章主要介绍了JavaScript实现从数组中选出和等于固定值的n个数的方法,需要的朋友可以参考下
2014-09-09
fetch跨域问题的使用详解
这篇文章主要介绍了fetch跨域问题的使用详解,fetch 的核心主要包括：Request , Response , Header , Body，利用了请求的异步特性 --- 它是基于 promise 的，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
JS实现数组内值累加常见的3个方法
这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下
2023-07-07