计算机学院实验报告（电子版）
课程名称： JavaScript编程 2018 年 4 月11日 实验名称 姓 名 实验类型 综合型 表单验证 学 号 实验地点 科技楼102 指导老师 班 级 成 绩 栾宇 一、实验目的和要求： 完成用户注册页面的设计，实现表单的有效性验证。 1．练习网页表格布局 2．练习HTML表单及表单控件 3．使用JS实现表单有效性验证 4．使用div显示提示信息 二、实验内容： 1．设计网站用户注册页面，综合应用表格、表单等，具体要求： ? 用户文本框：要求长度6-12位； ? 密码框：要求长度6-12位；字母数字的组合，不能有其他字符； ? 确认密码框：与密码框一致； ? 年龄文本框：必须是数字，且值大于0； ? 电子邮件文本框： ? 性别单选框； ? 爱好复选框：至少选择两项； ? 个人简介多行文本域：至少10个字符； ? 从网上查找JS年月日级联下拉列表、省市级联下拉列表，移植到本网页； ? 学历下拉列表框，不能是“请选择”； 2．使用JS实现表单有效性验证 ? 文本框、密码框等失去焦点时进行验证； ? 使用div显示错误或正确提示信息； ? 表单提交之前对表单进行有效性验证，如有错误，阻止提交； 三、实验环境： 1. Win7 OS 2. Dreamweaver 四、实验步骤（程序清单与测试数据）： 首先明确这是用户注册界面，首先应该是姓名的输入，然后是密码的输入和确认。 function checkPsd1(){ div11=document.getElementById(\ psd1=form1.textpsd1.value; var flagZM=false var flagSZ=false var flagQT=false if(psd1.length<6 || psd1.length>12){ div11.innerHTML=\长度错误\ return false; } else { for(i=0;i < psd1.length;i++) { if((psd1.charAt(i) >= 'A' && psd1.charAt(i)<='Z') || (psd1.charAt(i)>='a' && psd1.charAt(i)<='z')) flagZM=true else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9') { flagSZ=true} else { flagQT=true} } if(!flagZM||!flagSZ||flagQT){ div11.innerHTML=\密码必须是字母数字的组合\ return false; } else{ div11.innerHTML=\输入正确\ return true; } } return true; } function checkName(){ var userName=form1.textName.value; if(userName.length <6 || userName.length >12){ divName.innerHTML=\长度错误\ return false } else{ divName.innerHTML=\正确\ return true; } return true; } function checkForm(){ if(!checkName()) return false; if(!checkPsd1()) return false; return true; }