JavaScript 04 表单处理

1处理表单和表单元素事件2内容回顾事件是网页上发生的操作每个事件都有与之相关的Event对象事件有一个生命周期，始于触发事件的操作或条件，终于事件处理程序的最终响应用户可以指定在生成事件时要执行的，响应该事件的JavaScript代码。这段代码称为事件处理程序浏览器是用于显示HTML文档内容的应用程序浏览器还公开了一些可在脚本中访问和使用的对象Window对象表示浏览器的窗口模型中的所有其他对象都继承自Window对象，而且是通过Window对象访问的3本章目标处理表单对象及表单元素事件使用表单对象及表单元素校验用户输入4表单对象表单对象的作用–与用户进行交互，接收并处理用户的输入表单对象的属性–name–action–method–encoding–target–elements表单对象的方法–submit–reset5表单对象示例表单对象示例HTMLHEADTITLE使用表单对象标记/TITLE/HEADBODYBGCOLOR=#FFFFFFFormACTION=Simple.htmlmethod=postname=form1pinputtype=textsize=20name=namepinputtype=buttonvalue=提交查询onClick=form1.submit();inputtype=resetvalue=重置/FORM/BODY/HTML6表单元素事件文本域事件命令按钮事件复选框事件单选按钮事件组合框和列表框事件7文本框事件事件–onFocus–onBlur–onChange用法inputtype=textname=名称size=宽度onFocus=接受焦点处理例程;onBlur=失去焦点处理例程;onChange=改变内容处理例程;8文本框事件示例HTMLHEADTITLE文本域对象的事件/TITLESCRIPTLANGUAGE=JavaScriptfunctionwriteIt(value){alert(value);}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFFormname=myfminputtype=textname=first_textonFocus=writeIt('焦点');onBlur=writeIt('模糊');onChange=writeIt('修改');TEXTAREANAME=txt_areaROWS=10COLS=10/TEXTAREA/FORM/BODY/HTML文本域事件示例9命令按钮事件事件–onClick用法inputtype=buttonvalue=值name=名称onClick=单击事件处理例程;10命令按钮事件示例命令按钮事件示例HTMLHEADTITLE按钮对象的事件/TITLE图10.3a：示例3的输出结果SCRIPTLANGUAGE=JavaScriptfunctionwriteIt(value){myfm.second_text.value=value;}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFFormname=myfminputtype=textname=first_textINPUTTYPE=buttonvalue=复制onClick=writeIt(myfm.first_text.value);inputtype=textname=second_text/FORM/BODY/HTML11复选框事件事件–onClick用法inputtype=checkboxvalue=值name=名称checkedonClick=单击事件处理例程;12HTMLHEADTITLE复选框对象的事件/TITLESCRIPTLANGUAGE=JavaScriptfunctionswitchLight(){varthe_box=window.document.form_2.check_1;varthe_switch=;if(the_box.checked==false){alert(请把灯打开！);document.bgColor='black';}else{alert(谢谢！);document.bgColor='white';}}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFformname=form_2inputtype=checkboxname=check_1onClick=switchLight();电灯开关/form/BODY/HTML复选框事件示例复选框事件示例13单选按钮事件事件–onClick用法inputtype=radiovalue=值name=名称checkedonClick=单击事件处理例程;14单选按钮事件示例HTMLHEADTITLE选项按钮对象的事件/TITLESCRIPTLANGUAGE=JavaScriptfunctionoffButton(){varthe_box=window.document.form_1.radio_1;if(the_box.checked==true){window.document.form_1.radio_2.checked=false;document.bgColor='black';alert(请把灯打开！);}}functiononButton(){varthe_box=window.document.form_1.radio_2;if(the_box.checked==true){window.document.form_1.radio_1.checked=false;document.bgColor='white';alert(谢谢！);}}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFTEXT=redformname=form_1inputtype=radioname=radio_1onClick=offButton();关灯inputtype=radioname=radio_2onClick=onButton();checked开灯/form/BODY/HTML单选按钮事件示例15组合框与列表框事件事件–onFocus–onBlur–onChange用法selectsize=name=onFocus=onBlur=onChange=optionvalue=值1值1/optionoptionvalue=值2值2/optionoptionvalue=值3selected值3/option……………………………/select16组合框与列表框事件示例HTMLHEADTITLE组合框对象的事件/TITLESCRIPTLANGUAGE=JavaScriptfunctionshow(txt){alert(选中的是+txt);}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFTEXT=pinkformname=the_formselectname=choose_categoryonChange=show(the_form.choose_category.options[selectedIndex].text);optionselected狗/optionoption鱼/optionoption鸟/option/select/form/BODY/HTML组合列表框事件示例17表单有效性验证什么是表单有效性验证–在用户在表单中输入的内容提交到服务器之前，在客户端利用表单元素产生的事件，运用脚本(JavaScript)，校验用户输入的数据的有效性表单有效性验证的优点–在客户端验证，速度快–减轻服务器端压力应用举例18表单验证应用实例HTMLHEADTITLE表单对象的事件/TITLESCRIPTLANGUAGE=JavaScriptfunctionvalidateFirstName(){......}functionvalidateLastName(){......}functionvalidateEmail(){......}functionprocessForm(){......}/SCRIPT/HEADBODYBGCOLOR=#FFFFFFH2ALIGN=CENTER处理表单事件/H2HRFORMname=form1P名字：INPUTTYPE=textNAME=fnamesize=10onBlur=validateFirstName();姓氏：INPUTTYPE=textNAME=lnamesize=15onBlur=validateLastName();/pPEmail：INPUTTYPE=textNAME=emailsize=10onBlur=validateEmail();附注：TEXTAREANAME=commentrows=4cols=30请输入附注/TEXTAREA/pPALIGN=CENTERINPUTTYPE=buttonvalue=提交此表单onClick=processForm();INPUTTYPE=resetvalue=重置/P/FORM/BODY/html表单验证应用示例19总结表单用于与用户进行交互在表单中可以捕获表单元素事件–文本域事件–命令按钮事件–复选框事件–单选框事件–组合/列表框事件利用表单元素事件进行用户输入有效性校验