JavaScript程序的设计（第2版）02.窗体（form）及其元素对象.pptVIP

窗体（form）及其元素对象;窗体对象;　　当用户在网页中添加了form标签后，就创建了一个form对象，这时可以在JavaScript代码中根据form对象的属性、方法和事件来实现各种功能。 1．窗体对象属性 窗体对象的属性对应于页面中表单的属性，窗体对象的具体属性如表7-3所示。; 例7-2 本示例用于演示在页面表单中的应用窗体对象属性，在 JavaScript代码中根据窗体对象的属性将两个表单中的元素名称输出到页面中。程序代码如下：; 在上述代码中可以看出，使用“document.forms1.length”语句可以取得页面中表单的个数，根据此个数循环，在该循环中嵌套循环，以表单中元素个数为终止条件，最后使用“document.forms[j].elements[i].name”语句获取每个表单中的元素名称。运行结果如图7-5所示。;3．窗体对象事件 JavaScript中窗体对象事件有两个，分别为onSubmit和onReset，onSubmit事件是当用户单击“提交”按钮时触发，onReset事件是当用户单击“重置”按钮时触发。onSubmit事件和onReset事件与form标记一起使用，并且必须放在/form标记之前。在表单数据传给服务器之前，通常使用onSubmit事件来验证表单数据，当用户单击表单“重置”按钮时会触发一个onReset事件，可以使用这个事件来判断用户是否真的想要重置表单内容。; 从上述代码可以看出，在表单中使用了onSubmit和onReset事件，分别在这两个事件中调用submittest()与resettest()函数，在submittest()函数中，主要实现判断名字、地址文本框是否为空的功能，如果为空，弹出相应的提示对话框，并且使用return false语句结束函数调用，在resettest()函数中，将表单中的文本框内容重置。运行结果如图7-7所示。;窗体对象的应用;（3）创建“检查用户名”按钮，在该按钮的onClick事件中调用检验用户名的函数，要求用户名由3-10位的字母、数字和下划线组成，并且首字符为字母，如果不合法将弹出提示对话框。实现验证用户名是否由3-10位的字母、数字和下划线组成的正则表达式如下：; （5）这时需要对输入的电话号码进行判断，需要定义电话号码文本框验证函数，使电话号码文本框输入值为数字，代码如下。;可以在提交按钮事件的处理函数中调用上述函数进行判断，关键代码如下。;（8）最后编写一个限制文本区域输入字符数的函数，在页面中文本区域的onkeypress事件中调用，关键代码如下。