使用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>