js下 Day16、正则案例

一.封装格式化日期

功能思路分析:

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

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

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

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

js下 Day16、正则案例

#二.表单验证

效果图:

js下 Day16、正则案例

功能思路分析:

1. 面向对象框架

js下 Day16、正则案例

js下 Day16、正则案例

2. 用户名验证

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

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

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

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

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

js下 Day16、正则案例

3. 密码验证

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

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

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

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

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

js下 Day16、正则案例

4. 验证码验证

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

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

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

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

js下 Day16、正则案例

5. 切换验证码

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

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

js下 Day16、正则案例

6. 登录验证

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

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

js下 Day16、正则案例

7. 地址栏参数解析

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

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

\3. = 替换成 ":"

\4. & 替换成 ","

\5. JSON.parse()

js下 Day16、正则案例

#三.今日小结

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

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

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

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

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

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

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

效果图:

js下 Day16、正则案例

功能思路分析:

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

\1. 设置一个初始下标

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

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

2. 左侧菜单切换

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

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

\3. 调用切换方法

3. 自动轮播

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

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

3.调用切换方法

4. 滑入暂停自动轮播

\1. 给大盒子绑定滑过事件(mouseover)

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

5. 滑出继续自动轮播

\1. 给大盒子绑定滑出事件(mouseout)

\2. 调用自动轮播方法

上一篇:poj3207 Ikki's Story IV - Panda's Trick 2-SAT


下一篇:Day16_96_IO_available() 和 skip()方法