使用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执行表单验证的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

原生JS实现多个小球碰撞反弹效果示例
这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下
2018-01-01
始终在屏幕中间显示Div的代码(css+js)
如何始终在屏幕中间显示Div需要的朋友可以参考下。
2011-03-03
JavaScript实现微信小程序打卡时钟项目实例
这篇文章主要为大家介绍了JavaScript实现微信小程序打卡时钟项目实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
解析img图片没找到onerror事件 Stack overflow at line: 0
本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
webpack3.0升级4.0的方法步骤
这篇文章主要介绍了webpack3.0升级4.0的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
DEFER怎么用？
DEFER怎么用？...
2006-07-07
浅谈JavaScript中你可能不知道URL构造函数的属性
这篇文章主要介绍了浅谈JavaScript中你可能不知道URL构造函数的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
js实现拉伸拖动iframe的具体代码
这篇文章介绍了js实现拉伸拖动iframe的具体代码，有需要的朋友可以参考一下
2013-08-08
JS小功能(setInterval实现图片效果显示时间)实例代码
这篇文章主要介绍了setInterval实现图片效果显示时间实例代码，有需要的朋友可以参考一下
2013-11-11
JS实现DOM删除节点操作示例
这篇文章主要介绍了JS实现DOM删除节点操作,结合实例形式分析了javascript使用removeChild()操作页面dom节点删除功能的相关实现技巧,需要的朋友可以参考下
2018-04-04