js下 Day16、正则案例

一．封装格式化日期

功能思路分析:

\1. 第一个参数format表示指定的时间格式

\2. 第二个参数date为指定的时间(可以不传，默认当前时间)

\3. 获取第二个参数中指定时间的年月日时分秒

\4. 将format中的格式利用replace（）方法替换

#二．表单验证

效果图:

功能思路分析:

1. 面向对象框架

2. 用户名验证

\6. 给用户名文本框绑定失去焦点事件(blur)

\7. 编写手机号正则和邮箱正则

\8. 验证文本框的内容是否符合手机号正则或邮箱正则

\9. 验证通过返回true，并且隐藏错误提示

\10. 验证失败返回false，并且显示错误提示

3. 密码验证

\6. 给密码文本框绑定失去焦点事件(blur)

\7. 编写非纯数字和非纯字母正则

\8. 验证文本框的内容是否符合非纯数字并且和纯字母正则，并且长度3-6

\9. 验证通过返回true，并且隐藏错误提示

10. 验证失败返回false，并且显示错误提示

4. 验证码验证

\4. 给验证码文本框绑定失去焦点事件(blur)

\5. 判断文本框里的内容是否与验证码盒子中的内容一致

\6. 验证通过返回true，并且隐藏错误提示

\7. 验证失败返回false，并且显示错误提示

5. 切换验证码

\2. 封装一个获取随机验证码的方法

\3. 给换一换按钮绑定点击事件(click),调用随机验证码方法

6. 登录验证

\2. 给登录按钮绑定点击事件

\3. 调用用户名、密码和验证码的失去焦点事件，当他们返回值都为真是，跳转页面(location.href),并将用户信息传递过去

7. 地址栏参数解析

\1. 拿到地址栏信息 location.search.slice(1)

\2. 前后拼接**{" "}**

\3. = 替换成 ":"

\4. & 替换成 ","

\5. JSON.parse()

#三．今日小结

1.利用正则替换字符: replace()

2.三元运算符设置默认参数

3.手机号正则：/^1[3-9]\d{9}$/

4.邮箱正则:/\w+@\w+.(com|cn|net)/

5.地址栏相关信息: location.href location.search

6.将json字符串解析成对象: JSON.parse()

#四．作业 -- 面向对象轮播

效果图:

功能思路分析:

1. 封装一个公共的切换方法

\1. 设置一个初始下标

\2. 通过classList切换选中项高亮效果

\3. 找到存放内容的大盒子，修改它的top值

2. 左侧菜单切换

\1. 通过事件委托给左侧菜单绑定点击事件

\2. 修改初始下标为当前选中项下标

\3. 调用切换方法

3. 自动轮播

\1. 设置间歇调用定时器(setInterval())

\2. 初始下标++ ，判断是否到最后一张

3.调用切换方法

4. 滑入暂停自动轮播

\1. 给大盒子绑定滑过事件（mouseover）

\2. 鼠标滑过清除定时器(clearInterval())

5. 滑出继续自动轮播

\1. 给大盒子绑定滑出事件（mouseout）

\2. 调用自动轮播方法