[TOC]

主要内容

jQuery动画效果的使用
jQuery结合正则实现表单验证
学习目标
| 知识点 | 要求 | | —- | —- | | jQuery的显示和隐藏动画效果 | 熟悉 | | jQuery的滑动动画效果 | 熟练 | | jQuery的淡入淡出动画效果 | 熟练 | | jQuery的自定义动画 | 熟悉 | | jQuery动画案例之心跳 | 了解 | | jQuery动画案例之轮播图 | 了解 | | jQuery综合案例之点名器 | 练习 | | jQuery基本表单验证 | 熟练 | | 正则表达式的引入 | 了解 | | form表单结合正则表达式验证 | 掌握 |

一 jQuery动画效果的使用

jQuery_02 - 图1
在界面动画特效上,jQuery也给我们提供了比JavaScript更加丰富的方法,jQuery提供的动画中大致上有简单显示隐藏/滑动/淡入淡出等,而且还给我们提供了自定义动画效果的方法,那么接下来咱们就认识一下这些方法.

4.1显示和隐藏动画

实现简单显示动画效果方法show()
实现简单隐藏动画效果方法hide()
实现切换简单显示和隐藏动画效果方法toggle()

<!DOCTYPE html>

4.2滑动动画效果

实现向下滑动动画效果slideDown
实现向上滑动动画效果slideUp
实现滑动切换动画效果slideToggle

<!DOCTYPE html>

4.3淡入淡出动画效果

实现淡入动画效果方法fadeIn
实现淡出动画效果方法fadeOut
实现淡入淡出切换效果方法fadeToggle
实现淡入之指定透明度效果方法fadeTo

<!DOCTYPE html>

4.4实现自定义动画效果

<!DOCTYPE html>

本节作业

1 jQuery常见动画效果举例
2 jQuery实现自定义动画效果的语法
3使用jQuery开发点名器

二表单验证

为什么要进行数据验证
保证用户数据有效性,要符合格式和内容要求
为什么要进行JS或者jQuery在浏览器上进行表单验证
在浏览器上,在用户提交数据之前对数据的有效性进行校验,使用JS和jQuery可以让浏览器成为保障数据有效性的第一道防线,这样可以降低服务器端负担,减少无效数据的提交,提高数据提交的成功率,减少用户操作的失败率,可以在页面上实现很好的交互效果,提升用户体验感.但是并不是所有验证都不需要发送请求,例如用户名是否被占用.能在浏览器上解决的问题,就不让服务器去处理.
jQuery_02 - 图2
jQuery_02 - 图3

3.1 基本的表单验证案例

验证要求:
用户名不能为空
用户名长度大于6
用户名中不能有数字
密码不少于5位
两次密码必须一致
邮箱格式正确必须有@和. 例如123456789@qq.com
实现效果:
jQuery_02 - 图4
实现代码:

<!DOCTYPE html>

您的姓名：
输入密码：
再输入一遍密码：
您的Email：

总结：
1.对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件,onsubmit绑定的方法时要有return关键字,绑定的方法要返回true/false
2.表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
3.表单的验证和String对象有密切关系 length charAt(i) indexOf(“@”)
4.如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==””或username.length ==0
5.验证出错要return false，验证无错要return true，并且 onsubmit=”return checkForm()
6.该示例的缺点主要在于对于邮箱如果采用传统方式进行验证，代码繁琐并且不能保证严谨性,过度依赖String的API。对于邮箱、手机号码、邮政编码等验证，可以使用正则表达式进行验证，严谨而且简单。

3.2 正则表达式

jQuery_02 - 图5
什么是正则表达式
Regular Expression，在代码中常简写为regex,正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。
为什么使用正则表达式
正则表达式可以是文本的校验的代码更加简洁
正则表达式可以实现更加严谨细致的校验
正则表达式举例
匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
匹配腾讯QQ号：[1-9][0-9]{4,}
匹配中国邮政编码：\d{6}
匹配身份证：\d{15}|\d{18}
匹配由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$　
匹配Email地址：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)
匹配中文字符的正则表达式： [\u4e00-\u9fa5] [a-zA-Z]
如何创建正则表达式
正则表达式在JS中创建的语法为:
var reg=/china/;
var reg=new RegExp(“china”);
正则表达式的通配符号

正则表达式的重复字符

*使用正则表达式实现数据验证