任务七 实现新闻的数据验证
学习目标
了解表单一般需要什么样的验证。
了解JavaScript操作表单数据的常用方法。
会使用JavaScript对常见的表单数据错误进行简单处理。
能完成新闻发布前的数据验证。
任务描述
几乎所有的网站都有让用户填写表单的操作，表单是实现网页与用户之间交流最常用的工具。表单设计的是否符合用户的输入习惯，表单在处理提交问题上是否考虑到用户可能出现的各种各样的问题，并是否采取了措施避免用户出现这些问题，这些都是评价网页的用户体验的基本指标。
任务四到任务六使用表单获取新闻的信息，在提交前没有验证表单中的各项数据是否正确，本次任务要求实现新闻发布前的数据验证，效果如图1-7-1所示。
图1-7-1 新闻数据验证范例
任务分析与相关知识
1.JavaScript概述
JavaScript是一种由Netscape的LiveScript发展而来的、原型化继承的、面向对象的、动态类型的并区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，例如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务器端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbit/s，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由Netscape的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含3个部分：ECMAScript、文档对象模型和字节顺序记号。
JavaScript的语法结构由运算符、表达式、语句、函数、对象和事件六个部分组成。
（1）运算符
运算符是完成操作的一系列符号，它有7类：赋值运算符（=，+=，−=，*=，/=，%=，＜＜=，＞＞=，|=，&=）、算术运算符（+，−，*，/，++，−−，%）、比较运算符（＞，＜，＜=，＞=，==，===，！=，！==）、逻辑运算符（||，&&，！）、条件运算（？：）、位移运算符（|，&，＜＜，＞＞，～，^）和字符串运算符（+）。
（2）表达式
运算符和操作数的组合称为表达式，通常分为4类：赋值表达式、算术表达式、布尔表达式和字符串表达式。
（3）语句
JavaScript程序是由若干语句组成的，语句是编写程序的指令。JavaScript提供了完整的基本编程语句，它们是：赋值语句、switch选择语句、while循环语句、for循环语句、foreach循环语句、dowhile循环语句、break循环中止语句、continue循环中断语句、with语句、try…catch语句和if语句（if…else，if…elseif…）。
（4）函数
函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。
1）一般的函数语句格式如下：
2）函数表达式格式如下：
3）函数的调用格式如下：
4）匿名函数（常作为参数在其他函数间传递）如下：
使用函数要注意以下几点：
1）函数由关键字function定义（也可由function构造函数构造）。
2）使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的函数必须定义后才能被调用。
3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名。
4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，还可以是函数。
5）return语句用于返回表达式的值。
（5）对象
JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。例如，要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如“document.bgcolor="blue"”，就是表示使背景的颜色为蓝色。
（6）事件
用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户的动作所引发，如用户按鼠标的按键，就产生Click事件，若鼠标的指针在链接上移动，就产生mouseover事件等。在JavaScript中，事件往往与事件处理程序配套使用。而对事件的处理，W3C的方法是用addEventListener函数，它有3个参数：事件、引发的函数和是否使用事件捕捉。为了安全，建议将第三个参数始终设置为false。传统的方法是定义元素的on事件，它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。JavaScript中事件还分捕获和冒泡两个阶段，但是传统绑定只支持冒泡事件。
（7）变量
变量定义如“varmyVariable="somevalue"”；也就是说变量有它的类型，上例中myVariable的类型为String（字符串）。
JavaScript支持的常用类型还有：
1）object：对象。
2）array：数组。
3）number：数字。
4）boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的。
5）null：一个空值，唯一的值是null。
6）undefined：没有定义和赋值的变量。
实际上JavaScript的变量是弱变量类型，赋值给它的是字符串，它就是String，赋值给它的是数字，它就是number。所以在函数的定义中，参数都是不带类型的。
2.表单元素的常用事件
界面具有交互能力的基本条件之一是它对于用户的某些行为具有响应能力，例如：
1）单击按钮，去检查表单数据。
2）文本框失去焦点，计算公式。
3）修改了不该修改的文本内容，文本框拒绝修改并且报警。
也就是说，表单中的很多控件都能识别到用户的特定行为，即我们说的事件，只有识别了这些行为，才能根据这些行为作出适当的响应。常用的表单事件见表1-7-1。
表1-7-1 常用表单事件列表
现以鼠标事件为例，演示JavaScript如何处理表单中的事件。
演示一 当鼠标进入按钮区域，按钮的背景变成黄色，当鼠标离开表单区域，按钮的背景变成灰色。
代码1-7-1 test1-7-1.html
在浏览器测试该页面，可以看到当鼠标移到按钮上方，按钮的背景成为黄色，当鼠标离开按钮，按纽的背景变成灰色。第19行使用了JavaScript常用的事件处理方法：on事件名="…"的方式来处理事件，this是参数，代表当前对象，当前正在处理的是按钮的事件，所以在这里，this代表按钮。
3.JavaScript取表单数据的常用方法
JavaScript处理表单数据一般分为两个步骤：先取出表单域的值，然后根据业务逻辑判断值的正确性
例如：登录界面，JavaScript首先应该把用户输入的用户名和密码的值取出来，然后根据要求，检查是否为空或不正确，如果为空或不正确，说明数据是非法的，就没有必要提交给服务器了。JavaScript的表单验证功能如同在客户端设置了一道防线，大大减轻了服务器端数据验证的负担。
下面通过一个演示，展示JavaScript如何取常用表单域的值。
演示二 JavaScript取文本框、文本域、下拉列表、单选按钮和多选按钮的值。
代码1-7-2 test1-7-2.html
在浏览器测试该页面，结果如图1-7-2和图1-7-3所示。
图1-7-2 网页的表单设计
图1-7-3 表单提交之后出现的对话框效果图
4.常见的表单数据验证需求
一般的表单功能分为两种：收集信息、业务处理。常用的用户注册、产品发布、新闻发布都是信息的收集，而购物网站上下订单就是属于业务处理的范畴。收集信息的表单一般需要验证数据的格式如身份证号码、邮件、手机号码的格式是否符合要求，而业务处理的表单一般要验证数据的范畴，如订单的数量是否在合理的值之类，是否输入的是非数字的字符等。
下面代码给出了常用的输入数据格式验证函数，读者可以根据需求直接调用。
代码1-7-3 常用格式验证JavaScript函数集锦
演示三 表单验证的综合案例。
代码1-7-4 test1-7-4.html
测试test1-7-4.html的表单验证功能，实现了必填项不能为空、密码确认与密码必须相同、手机格式、E-mail格式的验证。
任务实施
1.任务单
本次任务要完成的任务清单见表1-7-2。
表1-7-2 任务七的任务清单
2.实施步骤
步骤一 打开GreenBar项目根目录下的bk_news_upload3.html，完成如下两个修改。
1）在head标签中添加如下代码：
2）修改原来的提交按钮，修改后的代码如下：
第1步修改是将JavaScript文件与当前的HTML文件关联。第2步修改，是让原来的提交按钮变成普通按钮，因为需要先验证再提交，所以改变了按钮的类型；当这个普通按钮被单击时，将会调用js文件中的checkForm函数，实现对内容的验证，验证通过才会提交表单。
步骤二 在GreenBar项目根目录下添加一个文件夹js，在该文件夹下添加一个js文件check.js，代码如下所示。
代码1-7-5 check.js
【操作提示】
1）请模仿代码1-7-4的第65～70行代码的写法，完成第6～8行的代码。
2）请模仿代码1-7-4的第71行代码的写法，完成第9行的代码。
3）请模仿代码1-7-4的第85行代码的写法，完成第20行的代码。
之前的JavaScript都是嵌入在HTML中，这样会使HTML内容过多，而且格式也不统一，代码不美观。还有一种方式是将JavaScript脚本存储在js文件中，然后在HTML中使用“＜script type="text/javascript"src="js文件的相对路径"＞＜/script＞”这种方式引用js文件，就可以了。
步骤三 运行GreenBar网站项目，测试页面bk_news_upload3.html，完成如下测试：
1）如果不输入标题，单击“提交”按钮之后，出现“新闻标题为必填字段！”的提示。
2）如果输入了标题，“是否原创”选择了“是”，而没有输入作者，单击“提交”按钮之后，出现“原创新闻必须提供作者”提示。
3）如果输入了标题，“是否原创”选择了“否”，而没有输入文章来源，单击“提交”按钮之后，出现“非原创新闻必须提供新闻来源”的提示。
4）如果输入内容都正确，单击“提交”按钮之后，表单内容提交给后台的Servlet处理，并反馈一个操作结果。
自我评价
思考与练习
一、填空题
1.鼠标移到对象上会触发____事件，鼠标离开对象会触发____事件，鼠标单击会触发____事件。
2.JavaScript可以操作HTML的文档结构，例如，它可以使用____方法，根据标签的名字得到所有标签对象；使用____方法，根据标签的id得到标签对象；使用____方法，把一个标签“挂”到另一个标签下，作为后者的子标签。
3.JavaScript可以操作表单，使用____方法可以得到文本框的值；使用____属性判断单选或者是多选按钮是否被选中。
二、操作题
1.使用JavaScript操作css样式，实现一个变色表格的案例。效果如图1-7-4所示，当把鼠标放到表格中（标题行除外），鼠标所在的那一行表格的背景颜色和字体颜色都会发生变化（具体颜色不作要求）。
图1-7-4 变色表格效果图
2.使用JavaScript操作表单的数据。要求实现如图1-7-5所示的界面，如果单击图中按钮，左侧用户输入的信息就会在右侧的文本区域中显示。
图1-7-5 表单提交之后界面效果图
3.使用JavaScript操作表单的数据，要求设计如图1-7-6所示的表单，并实现如下两个功能：
1）当用户在下拉列表中选择头像，右边的图片能更改为对应的图片（图片读者准备）。
2）当单击“提交”按钮时，能判断所有星号标注的表单域内容不能为空。
图1-7-6 表单效果图
4.给产品上传表单，添加表单验证功能。