jQuery和Ajax实战教程（第2版）课件 第6章-jQuery表单

第6章jQuery表单掌握表单操作与验证的核心技术文本框操作单选按钮复选框应用拖拽条表单校验引言表单的重要性网页与用户交互的主要途径，用户输入数据的入口，是Web应用的基础组件表单验证的意义确保数据质量，维护系统安全，提供良好的用户体验本章学习目标掌握文本框操作val()方法、input/change事件、focus/blur事件单选按钮与复选框选中状态判断、值获取与设置、change事件应用拖拽条应用range控件操作、实时交互效果实现表单校验技术正则表达式应用、实时验证、全局校验文本框操作val()方法获取值设置值focus()方法获得焦点focus/blur事件获得/失去焦点时触发input与change事件对比监听方式$("#txt").val()$("#txt").val("天天向上")$("#txt").focus()事件触发时机使用场景change失去焦点且值发生变化时触发用户完成输入后的验证、最终确认操作input值实时变化时立即触发实时预览、即时验证、搜索建议$("#txt").on("input",function(){/*实时监听*/})实战案例字数统计输入框功能特点：

最大输入140字，实时字数统计

超字数显示红色警告提示

超字数自动禁用发布按钮关键代码使用prop()方法控制按钮禁用状态多币种汇率计算器功能特点：

支持人民币、美元、加元、泰铢

任意币种输入，其他实时换算

使用data属性存储汇率数据关键代码not(this)排除当前输入框，避免循环单选按钮操作获取选中值使用:checked选择器注意：必须使用:checked选择器获取当前选中的单选按钮设置状态选中/取消选中禁用/启用change事件监听监听整组单选按钮重要说明

•单选按钮必须设置相同的name属性才能互斥

•监听整组单选按钮的change事件，而不是单个按钮

•在change事件中使用$(this).val()获取被选中的值被禁用的单选按钮会变灰且不可被选中实战案例城市高亮选择功能特点：

点击城市单选按钮高亮对应条目

使用contains选择器匹配文本

动态添加/移除高亮样式关键代码:contains()选择器匹配包含指定文本的元素老年人免费票自动选择功能特点：

输入年龄自动判断资格

年龄≥60自动勾选免费票

同时禁用其他票型选项关键代码使用Number()转换输入值为数字类型复选框操作检查选中状态方法一：is()方法二：prop()设置状态选中/取消禁用/启用获取所有选中值使用each遍历选中取消选中change事件监听复选框可以多选，不像单选按钮互斥实战案例同意协议注册功能特点：

复选框控制按钮状态

勾选后按钮可用，否则禁用关键代码使用取反运算符控制按钮状态复选框全选功能特点：

全选框控制所有选项

手动全选后自动勾选全选框关键代码选中金额计算功能特点：

勾选项实时计算总价

遍历已选复选框累加金额关键代码使用.next()获取兄弟元素拖拽条应用基本使用HTML标签获取值事件对比input事件拖拽过程中实时触发change事件拖拽结束后触发调色板实战案例功能特点：

RGB三原色调节（0-255）

实时预览颜色变化

动态设置背景颜色关键代码Red(0-255)Green(0-255)Blue(0-255)表单校验基础校验原理

使用正则表达式定义验证规则

监听input事件实时验证

提供即时反馈增强体验

提交前全局校验确保安全验证规则姓名校验邮箱校验基本校验示例HTML结构jQuery校验代码.test()方法检查字符串是否匹配正则表达式表单校验实战中文姓名校验正则表达式校验规则2-4个汉字邮箱校验正则表达式校验规则标准邮箱格式密码强度校验正则表达式校验规则6-16位，包含数字、大小写字母全局校验代码定义状态变量单项校验示例提交时全局校验实时反馈监听input事件即时显示错误双重保障客户端验证+服务器验证用户体验清晰的错误提示提升可用性本章总结核心知识点val()方法获取与设置表单值input/change事件实时监控与焦点变化prop()方法设置选中、禁用状态表单校验正则表达式验证本章作业结婚年龄判断根据性别和年龄判断是否达到法定结婚年龄日期选择器使用date