jQuery 表单处理教程 | TensorFlow风格

jQuery 表单处理基础

表单选择器

jQuery 提供了专门的表单选择器，用于选择表单元素：

                    // 选择所有表单
$('form')

// 选择表单中的所有输入元素
$('form :input')

// 选择所有文本输入框
$('input:text')

// 选择所有密码输入框
$('input:password')

// 选择所有单选按钮
$('input:radio')

// 选择所有复选框
$('input:checkbox')

// 选择所有提交按钮
$('input:submit')

// 选择所有重置按钮
$('input:reset')

// 选择所有文件上传按钮
$('input:file')

// 选择所有下拉菜单
$('select')

// 选择所有文本域
$('textarea')
                

表单事件

jQuery 提供了多种表单事件处理方法：

                    // 表单提交事件
$('form').submit(function(event) {
    // 阻止表单默认提交
    event.preventDefault();
    // 表单处理逻辑
    console.log('表单提交');
});

// 输入框焦点事件
$('input').focus(function() {
    console.log('输入框获得焦点');
});

// 输入框失去焦点事件
$('input').blur(function() {
    console.log('输入框失去焦点');
});

// 输入框内容变化事件
$('input').change(function() {
    console.log('输入框内容变化');
});

// 输入框按键事件
$('input').keyup(function() {
    console.log('输入框按键抬起');
});

// 复选框/单选按钮点击事件
$('input:checkbox, input:radio').click(function() {
    console.log('复选框/单选按钮点击');
});

// 下拉菜单选择事件
$('select').change(function() {
    console.log('下拉菜单选择变化');
});
                

表单值操作

jQuery 提供了便捷的方法来获取和设置表单元素的值：

                    // 获取表单元素的值
var username = $('#username').val();
var password = $('#password').val();
var email = $('#email').val();

// 设置表单元素的值
$('#username').val('默认用户名');
$('#password').val('');
$('#email').val('example@test.com');

// 获取复选框状态
var isChecked = $('#remember').prop('checked');

// 设置复选框状态
$('#remember').prop('checked', true);

// 获取单选按钮选中值
var gender = $('input[name="gender"]:checked').val();

// 获取下拉菜单选中值
var country = $('#country').val();

// 获取多选下拉菜单选中值
var interests = $('#interests').val(); // 返回数组

// 序列化表单数据
var formData = $('form').serialize();

// 序列化表单数据为对象
var formDataObj = {};
$('form').serializeArray().forEach(function(item) {
    formDataObj[item.name] = item.value;
});
                

表单验证

客户端表单验证

使用 jQuery 可以轻松实现客户端表单验证：

                    // 简单的表单验证
$('form').submit(function(event) {
    var isValid = true;
    var errorMessages = [];
    
    // 验证用户名
    var username = $('#username').val();
    if (username.trim() === '') {
        isValid = false;
        errorMessages.push('用户名不能为空');
    }
    
    // 验证邮箱
    var email = $('#email').val();
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        isValid = false;
        errorMessages.push('请输入有效的邮箱地址');
    }
    
    // 验证密码
    var password = $('#password').val();
    if (password.length < 6) {
        isValid = false;
        errorMessages.push('密码长度不能少于6位');
    }
    
    // 验证确认密码
    var confirmPassword = $('#confirm-password').val();
    if (password !== confirmPassword) {
        isValid = false;
        errorMessages.push('两次输入的密码不一致');
    }
    
    // 显示错误信息
    if (!isValid) {
        event.preventDefault();
        $('#error-messages').html('' + errorMessages.join('
') + '
');
    }
});

// 实时验证
$('#username').blur(function() {
    var username = $(this).val();
    if (username.trim() === '') {
        $(this).next('.form-error').remove();
        $(this).after('用户名不能为空
');
    } else {
        $(this).next('.form-error').remove();
    }
});

$('#email').blur(function() {
    var email = $(this).val();
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        $(this).next('.form-error').remove();
        $(this).after('请输入有效的邮箱地址
');
    } else {
        $(this).next('.form-error').remove();
    }
});
                

实践案例：用户注册表单

在这个案例中，我们将创建一个完整的用户注册表单，包含表单验证和提交处理。

                    // HTML结构
<form id="registration-form">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <div>
        <label for="confirm-password">确认密码：</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码">
    </div>
    <div class="radio-group">
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    </div>
    <div>
        <label for="country">国家/地区：</label>
        <select id="country" name="country">
            <option value="">请选择</option>
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="japan">日本</option>
            <option value="uk">英国</option>
        </select>
    </div>
    <div class="checkbox-group">
        <input type="checkbox" id="agree" name="agree">
        <label for="agree">我同意服务条款和隐私政策</label>
    </div>
    <button type="submit">注册</button>
    <div id="error-messages"></div>
    <div id="success-message" class="form-success" style="display: none;"></div>
</form>

// JavaScript代码
$(document).ready(function() {
    // 表单验证和提交
    $('#registration-form').submit(function(event) {
        event.preventDefault();
        var isValid = true;
        var errorMessages = [];
        
        // 重置错误信息
        $('#error-messages').html('');
        $('#success-message').hide();
        
        // 验证用户名
        var username = $('#username').val();
        if (username.trim() === '') {
            isValid = false;
            errorMessages.push('用户名不能为空');
        }
        
        // 验证邮箱
        var email = $('#email').val();
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            isValid = false;
            errorMessages.push('请输入有效的邮箱地址');
        }
        
        // 验证密码
        var password = $('#password').val();
        if (password.length < 6) {
            isValid = false;
            errorMessages.push('密码长度不能少于6位');
        }
        
        // 验证确认密码
        var confirmPassword = $('#confirm-password').val();
        if (password !== confirmPassword) {
            isValid = false;
            errorMessages.push('两次输入的密码不一致');
        }
        
        // 验证性别
        if (!$('input[name="gender"]:checked').length) {
            isValid = false;
            errorMessages.push('请选择性别');
        }
        
        // 验证国家/地区
        if ($('#country').val() === '') {
            isValid = false;
            errorMessages.push('请选择国家/地区');
        }
        
        // 验证同意条款
        if (!$('#agree').prop('checked')) {
            isValid = false;
            errorMessages.push('请同意服务条款和隐私政策');
        }
        
        // 显示错误信息
        if (!isValid) {
            var errorHtml = '';
            errorMessages.forEach(function(message) {
                errorHtml += '' + message + '
';
            });
            errorHtml += '';
            $('#error-messages').html(errorHtml);
        } else {
            // 模拟表单提交
            $('#success-message').text('注册成功！').show();
            console.log('表单数据：', $(this).serialize());
        }
    });
    
    // 实时验证
    $('#username, #email, #password, #confirm-password').blur(function() {
        var id = $(this).attr('id');
        var value = $(this).val();
        
        // 移除之前的错误信息
        $(this).next('.form-error').remove();
        
        // 验证用户名
        if (id === 'username' && value.trim() === '') {
            $(this).after('用户名不能为空
');
        }
        
        // 验证邮箱
        if (id === 'email') {
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) {
                $(this).after('请输入有效的邮箱地址
');
            }
        }
        
        // 验证密码
        if (id === 'password' && value.length < 6) {
            $(this).after('密码长度不能少于6位
');
        }
        
        // 验证确认密码
        if (id === 'confirm-password') {
            var password = $('#password').val();
            if (value !== password) {
                $(this).after('两次输入的密码不一致
');
            }
        }
    });
});
                

尝试填写并提交以下表单：

用户名：

邮箱：

密码：

确认密码：

性别：男女

国家/地区：

我同意服务条款和隐私政策

互动练习：表单数据收集

在这个练习中，你需要实现一个简单的表单数据收集功能，当用户填写表单并点击提交时，显示收集到的数据。

jQuery 表单处理

jQuery 表单处理基础

表单选择器

表单事件

表单值操作

表单验证

客户端表单验证

实践案例：用户注册表单

互动练习：表单数据收集

推荐教程

jQuery 基础概念

jQuery 选择器

jQuery DOM操作

jQuery 事件处理

jQuery 动画效果

jQuery AJAX