一、面向对象的Tab栏切换
功能需求:
1.点击tab栏,可以切换效果。
2.点击+号,可以添加tab项和内容项。
3.点击x号,可以删除当前的tab项和内容项。
4.双击tab项文字或者内容项文字,可以修改里面的文字内容。
思路:
抽象对象: Tab对象
● 该对象具有切换功能。
● 该对象具有添加功能。。
● 该对象具有删除功能。
● 该对象具有修改功能。
HTML 代码
JS代码:
笔记中图片丢失了
二、用户名验证
功能需求:
1.如果用户名输入合法,则后面提示信息为:用户名合法,并且颜色为绿色。
2.如果用户名输入不合法则后面提示信息为:用户名不符合规范,并且颜色为绿色。
思路:
1.用户名只能为英文字母,数字, 下划线或者短横线组成,并且用户名长度为6~ 16位.
2.首先准备好这种正贴表达式模式/$[a-zA-Z0-9- ]{6,16}^/
3.当表 单失去焦点就开始验证.
4.如果符合正则规范, 则让后面的span标签添加right类.
5.如果不符合正则规范, 则让后面的span标签添加wrong类
JS代码: