(8)--4.7 JS表单验证Web设计与应用.ppt

WebWeb设计与应用设计与应用4.7 JS应用 表单验证Web设计与应用HTML表单HTML表单HTML表单通常用来收集网页访问者的信息，例如搜索引擎的搜索框、网站应用的注册或登陆界面等。所有表单控件位于元素中：表单（表单（form）一些常用的表单控件如下：l添加文本添加文本控件：单行文本框、密码框、多行文本框（文本域）l选择选择控件：单选按钮、复选框、下拉列表l上传文件上传文件控件l提交表单提交表单控件：提交按钮、图像按钮lhtml5还加入了日期控件、电子邮件和URL输入控件、搜索输入控件。一些表单控件的元素一些表单控件的元素以及部分属性以及部分属性控件名字元素部分元素元素特性单行文本框name,maxlength单选按钮name,value(发送到服务器的值),checked(设置为checked表示加载时选定)复选框name,value(发送到服务器的值),checked文件上传域提交按钮name(非必要),value(按钮文本)图像按钮html5日期控件namehtml5电子邮件namehtml5搜索输入控件 表单验证l在浏览器中，初步检查用户输入的表单数据是否符合要求，这比发送到服务器服务器再返回结果来得快。l可以使用表单控件的属性来验证输入数据的有效性，也可以编写JavaScript代码来对其进行验证。l下面以一个问卷调查的表单来说明如何使用JavaScript来对必填字段进行验证。表单验证实例表单验证实例本案例使用了以下表单控件：表单控件表单控件控件类型控件类型标签标签type属性属性name属性属性单选按钮inputradioq1,q2,q3复选框inputcheckboxq4,q5单行文本框inputtextname,country,major提交按钮buttonsubmit可以使用以下方法验证字段非空：l标签的required属性lJavaScript代码判断选项是否选中状态（checked属性）必填字段的验证必填字段的验证required=“required”（可简写为required）l单选按钮：l文本框：l复选框：不适用，因为会使所有选项变为必选required属性属性functionselected(name)varj=0;varselected=document.getElementsByName(name);for(vari=0;iselected.length;i+)if(selectedi.checked)j+;break;if(j=0)returnfalse;returntrue;JavaScript代码代码selected函数用于判断指定name的单选或多选是否有选中的元素functioncheck()/调用selected(name)函数判断第1题的情况varq1=selected(q1);if(q1=false)alert(第1题必须选择一个选项。);returnfalse;returntrue;check函数用于调用selected函数判断对应的题目是否完成