《基于新信息技术的JavaScript程序设计基础》课件_第6章.pptx

项目6表单验证;

任务1先导知识：String对象、表单验证;

;

6.1.2使用String对象方法操作字符串

使用String对象的方法来操作目标对象并不操作对象本身，而只是返回包含操作结果的字符串。例如要设置改变某个字符串的值，必须要定义该字符串等于将对象实施某种操作的结果。

运行程序，运行的结果如图6.1所示。;

;

注意：String对象的toLowerCase()方法与toUpperCase()方法的语法相同、作用类似，不同点在于前者将目标串中所有字符转换为小写状态并返回结果给新的字符串。在表单数据验证时，如果文本域不考虑字符的大小写，可先将其全部字符转换为小写(当然也可大写)状态再进行相关验证操作。;

6.1.3获取目标字符串长度

字符串的长度length作为String对象的唯一属性，且为只读属性，它返回目标字符串(包含字符串里面的空格)所包含的字符数。

运行程序，运行的结果如图6.2所示。;

;

6.1.4查找字符串

在String对象中，可以通过indexOf()方法和lastIndexOf()方法查找一个子串在另一个字符串中的位置，返回的是从0开始的下标，如果不存在，则返回-1。这两个方法的用法类似，不同的是indexOf()方法从前向后查找，查找第一个匹配的子串，而lastIndexOf()则相反，从后向前查找第一个匹配的子串所在下标。

上述代码定义了两个字符串，在字符串str中查找指定字符出现的下标，程序运行的结果如图6.3所示。;

;

6.1.5截取字符串

在String对象中使用substring()方法可以进行字符串的截取，其语法如下：

此方法代码中，第一个参数为必填项，表示从当前下标位置开始截取字符串，如果没有第二个参数，则表示截取到字符串的末尾；如果有第二个参数，则第二个参数表示截取的结束下标。;

6.1.6分隔字符串

String对象提供split()方法来进行字符串的分隔操作。split()方法根据通过参数传入的规则表达式或分隔符来分隔调用此方法的字符串。

如果传入的是一个规则表达式regexpression，则该表达式由定义如何匹配的pattern和flags组成；如果传入的是分隔符separator，则分隔符是一个字符串或字符，使用它将调用此方法的字符串分隔开，num表示返回的子串数目，无此参数则默认为返回所有子串。;

6.1.7表单验证

无论是动态网站，还是其他B/S结构的系统都离不开表单。表单作为客户端向服务器端提交数据的主要载体，表单验证是避免提交的数据不合法的重要途径。

客户端验证实际是直接在已下载到本地的页面中调用脚本来进行验证，它不但能检查用户输入的无效或者错误数据，还能检查用户遗漏的必选项。

表单在提交的时候会触发一个事件—submit事件，该事件会在提交的时候触发，可以通过form标签的onsubmit属性进行绑定和设置，这样在表单提交的时候可以执行相关的事件函数，如图6.4所示。;

;

以常见的注册表单为例，表单验证的内容主要包括以下几种类型：

(1)检查表单元素是否为空(如登录名不能为空)。

(2)验证是否为数字(如出生日期中的年月日必须为数字)。

(3)验证用户输入的电子邮箱地址是否有效(如电子邮箱地址中必须有“@”和“.”字符)。

(4)检查用户输入的数据是否在某个范围之内(如出生日期的月份必须在1～12之间，日期必须在1～31之间)。

(5)验证用户输入的信息长度是否足够(如输入的密码必须大于等于6个字符)。;

任务2电子邮箱的验证;

;

验证电子邮件的格式程序进行分析：

(1)获取表单元素的值(String类型)，然后进行判断。

(2)表单FORM的提交事件onsubmit。;

将上述的程序代码保存为?.html文件并双击打开，系统调用谷歌浏览器执行，并输入邮箱，当邮箱格式错误时，程序运行的结果如图6.6～图6.8所示。;

;

;

6.2.2用户名和密码验证

编写程序对用户名和密码进行验证，其中用户名只能为数字或者字母，密码为6～16位，如图6.9所示。;

6.2.3多种表单控件验证

该表单中涵盖了多种表单控件，程序运行的结果如图6.10所示。;

代码中，对一个用户注册页面进行了表单数据提交的验证，在验证中，对用户名，密码以及重复密码进行了非空验证，同时对两次密码进行了比对，要求两次填写的密码必须一致。

在验证中，如果验证失败，则通过alert()函数弹出警告框提示。与此同时，还可以通过在文本框后面添加div或者label元素的形式，将错误消息显示在文本框后面，这样便不会中