百度ife前端2015春task练习记录02

所有代码可以在我的Github中找到，本篇文章记录task0002中的几个小练习。

练习1

要求

1. 在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。
   当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。

2. 单行变成多行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用换行、空格（全角/半角）、逗号（全角/半角）、顿号、分号来作为不同爱好的分隔。
   当点击按钮时的行为同上

3. 用户输入的爱好数量不能超过10个，也不能什么都不输入。当发生异常时，在按钮上方显示一段红色的错误提示文字，并且不继续执行后面的行为；当输入正确时，提示文字消失。
   同时，当点击按钮时，不再是输出到一个段落，而是每一个爱好输出成为一个checkbox，爱好内容作为checkbox的label。

思路

1. 很简单的实现，尝试封装了一个showList()方法，传递两个参数，一个是输入的数组，一个是使用的分隔符，也方便实现接下来的几个要求。
2. 这里主要是允许了分隔符随意设置，用了一个正则式表达[^\u4e00-\u9fa5a-zA-Z\d]，匹配的是非汉字非字母非数字。
3. 这里给前面的showList()添加了一个参数parentEle，表示创建的checkbox添加到哪个父元素中。checkbox依旧用for循环创建。

实现

这里只给出了javascript代码，全部代码可以在我的Github中找到
1.

var hobbyBtn = document.getElementById("show-hobby");
var oCon = document.getElementsByClassName(