IFE JavaScript Task0002-1 小练习1：处理用户输入

对自己最近做的一些小练习进行总结吧，巩固下记忆；

第一阶段

在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。

当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。

思路：创建一个数组保存数据；其中用array.split方法，以(",")为分割号作为数组元素的分割；

去掉数组里重复与空的元素；方法有很多，我这里用的是indexOf方法，先建立一个新数组；然后把这个数组的元素与之前保存用户数据的数组进行对比，如果找不到并且值不为空，那就把此时元素存进新的数组里；进行去重和过滤；

（其实也想过用filter方法，但是显示错误用不了，等以后再完善下）

第二阶段

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

思路：这个将分隔符号变为正则进行检测就好了；

第三阶段

用户输入的爱好数量不能超过10个，也不能什么都不输入。当发生异常时，在按钮上方显示一段红色的错误提示文字，并且不继续执行后面的行为；当输入正确时，提示文字消失。

同时，当点击按钮时，不再是输出到一个段落，而是每一个爱好输出成为一个checkbox，爱好内容作为checkbox的label。

思路：先在去重前进行判断，超过就显示错误提示；

然后最后对处理好的数据用innerHTML输出；

代码如下：

 1 <body>
 2 <textarea type="text" class="hobby"cols="45" rows="10"></textarea> <button class="hobby-btn">确定</button>
 3 <p style="display: none;color: red" class="error">输入的爱好数量不能超过10个，并且不能为空</p>
 4 <form class="textshow"></form>
 5 </body>
 6 <script>
 7     var hobbybtn=document.querySelector(".hobby-btn");
 8     var show=document.querySelector(".textshow");
 9     var erorrtirp=document.querySelector(".error");
10     hobbybtn.onclick=function(){
11         var hobbyText=document.querySelector(".hobby").value.trim();
12         var hobbyArray=hobbyText.split(/
|s+|\,|，|、|;|；/);
13         var resultarr=[];//去重后的数组
14         if(hobbyArray.length>10||hobbyText===""){
15             erorrtirp.style.display="block";
16         }
17         else{
18             erorrtirp.style.display="none";
19             for(var i=0;i<hobbyArray.length;i++){
20                 if(resultarr.indexOf(hobbyArray[i])===-1&&hobbyArray[i]!==""){
21                     resultarr.push(hobbyArray[i]);
22                 }
23             }
24             for(var j=0;j<resultarr.length;j++){
25                 show.innerHTML+= "<label>" + "<input type='checkbox'>" + resultarr[j] + "</label>"
26             }
27         }
28 
29 
30 
31 
32         /*function check(item) {
33 34              for(var i=0;i<hobbyArray.length;i++){
35                     if(item!==hobbyArray[i]){
36                         return item
37                     }
38                 }
39             }
40 41         var newarry=hobbyArray.filter(check(item));*/
42 
43     }
44 
45 </script>