使用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电梯导航的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
JavaScript中关于base64的一些事
base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。这篇文章重点给大家介绍JavaScript中关于base64的一些事，感兴趣的朋友跟随小编一起看看吧
2019-05-05
五个基于JS实现的炫酷登录页面
本文为大家准备了五个基于HTML+CSS+JS实现的酷炫登录页面的示例代码，文中的页面效果都很好看，需要的小伙伴可以参考一下
2022-04-04
实例讲解javascript实现异步图片上传方法
给大家详细讲解一下如何通过javascript写出异步图片上传，并且把实例代码给大家分享了下，有兴趣的读者们测试一下吧。
2017-12-12
jquery单行文字向上滚动效果的实现代码
这篇文章主要介绍了jquery单行文字向上滚动效果的具体实现，此效果适应于很多场景，会的不会的都要学习下啊
2014-09-09
JS实现unicode和UTF-8之间的互相转换互转
需要将PC送过来的UTF-8转换成UNICODE才能将内容通过短信发送出去，同样，接收到的短信为unicode编码，也许转换成UTF-8才能在PC端软件显示出来
2017-07-07
一个JavaScript函数把URL参数解析成Json对象
一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象，很实用，大家可以看看
2014-09-09
微信小程序生成二维码的示例代码
这篇文章主要介绍了微信小程序生成二维码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Cropper.js进阶实现图片旋转裁剪处理功能示例
这篇文章主要为大家介绍了Cropper.js进阶实现图片旋转裁剪功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
js 自定义的联动下拉框
一直都嫌下拉框这个html控件难看，之前弄了个<div><ul><li></li></ul></div>版的下拉框.
2010-02-02