17、任务十六——事件委托机制、简单表单验证

0、题目

用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据

　　首先用户输入的数据需要进行去空格及空字符处理（即trim（）函数），之后进行合规性验证，符合标准才可以添加至表格中，每一行的表格都有“删除”按钮，点击即可删除这一行的数据，如果给每一个按钮绑定事件的话，会对页面性能产生很大影响，而采用事件委托即可避免这个问题。

1、代码

task16.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>IFE JavaScript Task 16</title>
 6   </head>
 7 <body>
 8 <div>
 9     <label>城市名称：<input id="aqi-city-input" type="text"></label><br>
10     <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
11     <button id="add-btn">确认添加</button>
12   </div>
13   <table id="aqi-table">
14   <!--
15     <tr>
16       <td>城市</td><td>空气质量</td><td>操作</td>
17     </tr>
18     <tr>
19       <td>北京</td><td>90</td><td><button>删除</button></td>
20     </tr>
21     <tr>
22       <td>北京</td><td>90</td><td><button>删除</button></td>
23     </tr>
24    -->
25   </table>
26 <script src="task16.js"></script>
27 </body>
28 </html>

task16.js

 1 /**
 2  * aqiData，存储用户输入的空气指数数据
 3  * 示例格式：
 4  * aqiData = {
 5  *    "北京": 90,
 6  *    "上海": 40
 7  * };
 8  */
 9 var aqiData = {};
10  /* 从用户输入中获取数据，向aqiData中增加一条数据
11  * 然后渲染aqi-list列表，增加新增的数据
12  */
13 function addAqiData() {
14 　　var city=document.getElementById("aqi-city-input").value.trim();     //去掉空格的城市名
15 　　var number=document.getElementById("aqi-value-input").value.trim();  //去掉空格的空气质量指数
16     　　if(!(/^[\u4e00-\u9fa5_a-zA-Z]+$/.test(city))){     //验证城市名是否合规
17          　alert("城市名必须是中文或英文！");
18        　　return;
19     　　}
20     　　if(!(/^-?[1-9]\d*$/.test(number))){               //验证空气质量指数是否合规
21           　alert("空气质量指数必须为整数！");
22        　　 return;
23    　　 }
24     　　else{
25       　　  aqiData[city]=number;
26    　　 }
27 }
28 /**
29  * 渲染aqi-table表格
30  */
31 function renderAqiList() {
32 　　var content="<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";
33 　　for( var city in aqiData){
34         content+="<tr><td>"+city+"</td><td>"+aqiData[city]+"</td><td><button>删除</button></td></tr>";
35     }
36     document.getElementById("aqi-table").innerHTML=city ? content:" ";  //如果删除所有数据（即city不存在），那么content为“ ”，表头也会被删除掉
37 }
38 /**
39  * 点击add-btn时的处理逻辑
40  * 获取用户输入，更新数据，并进行页面呈现的更新
41  */
42 function addBtnHandle() {
43   addAqiData();
44   renderAqiList();
45 }
46 /**
47  * 点击各个删除按钮的时候的处理逻辑
48  * 获取哪个城市数据被删，删除数据，更新表格显示
49  */
50 function delBtnHandle(t) {
51   var city=t.target.parentNode.parentNode.firstChild.innerHTML;
52   delete aqiData[city];
53   renderAqiList();
54 }
55 function init() {
56   // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
57       document.getElementById("add-btn").addEventListener("click",addBtnHandle);
58   // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
59       document.getElementById("aqi-table").addEventListener("click",delBtnHandle);
60 }
61 init();

2、遇到的问题及解答

（1）报错：Cannot call method ' addEventListener ' of null

　　开始一直报错，后来发现是由于之前一直把js文件在<head>标签中引用，导致getElementById的时候Dom对象还未出现。（待补！浏览器渲染和DOM模型）

（2）delete 注意：

　　可以删除对象属性；

　　删除数组元素时，原来数组长度/索引不变，删除的元素变为undefined；

　　不可以删除变量和函数；

　　但Eval代码块中的变量和函数可以被删除（Firebug console中执行的代码会被当成是 Eval code来进行解析）。

详见：深入理解Delete（JavaScript）

转载于:https://www.cnblogs.com/cjlalala/p/5815951.html

17、任务十六——事件委托机制、简单表单验证相关推荐

js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
onkeyup事件，onpaste事件，完成实时表单验证
先上效果图: input框,用户输入值的方式就两种,一种是键盘输入,一种是鼠标粘贴.onkeyup事件可以在键盘输入的时候绑定事件,onpaste="return false",设 ...
web十六讲，表格与表单
什么是表格表格由<table>标签来定义每个表格均由若干行(由tr标签定义) 每行被分为若干个单元格(由td标签定义) 标签td指表格数据及数据单元格内容数据单元格可以包含文本.图片 ...
【html+js+jquery简单表单验证和删查】
结果图 1:需求包 2:文件1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
html5伪类触发机制,HTML5表单验证
validity属性表单元素对象具有此属性,返回值是一个ValidityState对象. ValidityState对象的名称是合成词,如有两个单词构成: (1).validity:翻译成汉语具有& ...
自制简单表单验证relative与absolute定位
html结构,用到了label与span <label class="relative"><input type="text" name=&q ...
js简单表单验证（弹出框）
登录和注册的弹出框的js验证有些字段是不能为空的,那么我们就要通过验证判断:用户是否填写. 此时就要用到js验证. 登录 html <form action="" meth ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
HTML(六)——表单验证、正则表达式、事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...