js面向对象开发实例 —— 用户名验证&面向对象的Tab栏切换

一、面向对象的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代码：