jquery失去焦点表单验证

基础概念

jQuery 失去焦点（blur）事件是指当表单元素（如输入框、选择框等）失去焦点时触发的事件。表单验证是指在用户输入数据时，通过一定的规则检查数据的合法性，以确保用户输入的数据符合要求。

类型

客户端验证：在用户输入数据时，通过 JavaScript 在客户端进行验证，及时反馈错误信息。
服务器端验证：在数据提交到服务器后，通过服务器端脚本进行验证，确保数据的合法性。

应用场景

注册表单：在用户注册时，验证用户名、邮箱、密码等字段是否符合要求。
登录表单：在用户登录时，验证用户名和密码是否正确。
搜索表单：在用户输入搜索关键词时，验证关键词是否符合要求。

示例代码

以下是一个简单的 jQuery 失去焦点表单验证示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 表单验证示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <span class="error" id="usernameError"></span><br><br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <span class="error" id="emailError"></span><br><br>
        <button type="submit">提交</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#username').blur(function() {
                var username = $(this).val();
                if (username.length < 5) {
                    $('#usernameError').text('用户名至少需要5个字符');
                } else {
                    $('#usernameError').text('');
                }
            });

            $('#email').blur(function() {
                var email = $(this).val();
                if (!email.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)) {
                    $('#emailError').text('请输入有效的邮箱地址');
                } else {
                    $('#emailError').text('');
                }
            });

            $('#myForm').submit(function(event) {
                if ($('#usernameError').text() !== '' || $('#emailError').text() !== '') {
                    event.preventDefault();
                }
            });
        });
    </script>
</body>
</html>