JS表单有效性验证实验报告-HTML
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
}
document.form1.MM.outerHTML = str +"</select>";
document.form1.YYYY.value = y;
document.form1.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],
["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],
JS表单有效性验证
实验报告
课程名称：网络编程技术基础
实验内容：JS表单有效性验证
作者所在系部：计算机科学与工程系
作者学号：
指导教师姓名：
实验四JS表单有效性验证
一、实验目的：
完成用户注册页面的设计，实现表单的有效性验证。
1．练习网页表格布局；
2．练习HTML表单及表单控件；
3．使用JS实现表单有效性验证；
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; return;}
var n = MonHead[MMvalue - 1];
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i<(n+1); i++)
s += "<option value='" + i + "'> " + i + "</option>\r\n";
document.form1.DD.outerHTML = s +"</select>";
["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],
["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],
["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var y = new Date().getFullYear();//先给年下拉框赋内容
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++)
{//以今年为准，前30年，后30年
str += "<option value='" + i + "'> " + i + "</option>\r\n";
return false;
}
else{
div11.innerHTML="<font color='green'>输入正确</font>"
return true;
}
}
return true;
}
function checkName(){
var userName=form1.textName.value;
个人简介多行文本域：至少10个字符；
从网上查找JS年月日级联下拉列表、省市级联下拉列表，移植到本网页；
学历下拉列表框，不能是“请选择”；
2．使用JS实现表单有效性验证
文本框、密码框等失去焦点时进行验证；
使用div显示错误或正确提示信息；
表单提交之前对表单进行有效性验证，如有错误，阻止提交；
三、实验步骤：
var flagQT=false
if(psd1.length<6 || psd1.length>12){
div11.innerHTML="<font color=red>长度错误</font>"
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'))
["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],
["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],
首先明确这是用户注册界面，首先应该是姓名的输入，然后是密码的输入和确认。
function checkPsd1(){
div11=document.getElementById("div1");
psd1=form1.textpsd1.value;
var flagZM=false
var flagSZ=false
flagZM=true
else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')
{ flagSZ=true}
else
{ flagQT=true}
}
if(!flagZM||!flagSZ||flagQT){
div11.innerHTML="<font color=red>密码必须是字母数字的组合</font>"
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
<select name=MM onchange="MMDD(this.value)">
</select>
<select name=DD>
</select>
</form>
<script language="JavaScript"><!--
function window.onload()
{
strYYYY = document.form1.YYYY.outerHTML;
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆","香港","澳门"],
["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],
return true;
}
return true;
}
function checkForm(){
if(!checkName()) return false;
if(!checkPsd1()) return false;
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="js省份城市联动.htm" onSubmit="return checkForm()">
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
//--></script>
</body>
</html>
下面就是出生地，个人简历，学历，邮箱的输入和填写了。
<script type="text/javascript">
如果输入的不正确，会有相应的提示并进行重新的输入
如果用户能够输入正确的格式，则提示输入正确并进行下一步的输入。
下面就是出生日期、性别、爱好的输入了
<body>
<form name=form1>
<select name=YYYY onchange="YYYYMM(this.value)">
</select>
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
document.form1.DD.value = new Date().getDate();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
}
document.form1.YYYY.outerHTML = str +"</select>";
var str = strMM.substring(0, strMM.length - 9);//赋月份的下拉框
for (var i = 1; i < 13; i++)
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
4．使用div显示提示信息。
二、实验内容：
1．设计网站用户注册页面，综合应用表格、表单等，具体要求：
用户文本框：要求长度6-12位；
密码框：要求长度6-12位；字母数字的组合，不能有其他字符；
确认密码框：与密码框一致；
年龄文本框：必须是数字，且值大于0；
电子邮件文本框：
性别单选框；
爱好复选框：至少选择两项；
<td><div id="div1">请输入密码，长度6-12，字母和数字的组合</div></td>
</tr>
<tr>
<td>确认密码</td>
<td><input name="textpsd2" type="text" id="textpsd2"></td>
<td> </td>
</tr>
if (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],
["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
<td width="322"><div id="divName">用户名长度6-12</div></td>
</tr>
<tr>
<td>密码</t来自百度文库>
<td><input name="textpsd1" type="password" id="textpsd1" onBlur="checkPsd1()"></td>
<table width="600" border="0" align="center">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="82">用户名</td>//用户名应该是6-12位，对于这个长度是有要求的。
<td width="182"><input name="textName" type="text" id="textName" onBlur="checkName()"></td>
if(userName.length <6 || userName.length >12){
divName.innerHTML="<font color=red>长度错误</font>";
return false
}
else{
divName.innerHTML="<font color=green>正确</font>";
document.form1.MM.outerHTML = str +"</select>";
document.form1.YYYY.value = y;
document.form1.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],
["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],
JS表单有效性验证
实验报告
课程名称：网络编程技术基础
实验内容：JS表单有效性验证
作者所在系部：计算机科学与工程系
作者学号：
指导教师姓名：
实验四JS表单有效性验证
一、实验目的：
完成用户注册页面的设计，实现表单的有效性验证。
1．练习网页表格布局；
2．练习HTML表单及表单控件；
3．使用JS实现表单有效性验证；
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; return;}
var n = MonHead[MMvalue - 1];
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i<(n+1); i++)
s += "<option value='" + i + "'> " + i + "</option>\r\n";
document.form1.DD.outerHTML = s +"</select>";
["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],
["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],
["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var y = new Date().getFullYear();//先给年下拉框赋内容
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++)
{//以今年为准，前30年，后30年
str += "<option value='" + i + "'> " + i + "</option>\r\n";
return false;
}
else{
div11.innerHTML="<font color='green'>输入正确</font>"
return true;
}
}
return true;
}
function checkName(){
var userName=form1.textName.value;
个人简介多行文本域：至少10个字符；
从网上查找JS年月日级联下拉列表、省市级联下拉列表，移植到本网页；
学历下拉列表框，不能是“请选择”；
2．使用JS实现表单有效性验证
文本框、密码框等失去焦点时进行验证；
使用div显示错误或正确提示信息；
表单提交之前对表单进行有效性验证，如有错误，阻止提交；
三、实验步骤：
var flagQT=false
if(psd1.length<6 || psd1.length>12){
div11.innerHTML="<font color=red>长度错误</font>"
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'))
["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],
["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],
首先明确这是用户注册界面，首先应该是姓名的输入，然后是密码的输入和确认。
function checkPsd1(){
div11=document.getElementById("div1");
psd1=form1.textpsd1.value;
var flagZM=false
var flagSZ=false
flagZM=true
else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')
{ flagSZ=true}
else
{ flagQT=true}
}
if(!flagZM||!flagSZ||flagQT){
div11.innerHTML="<font color=red>密码必须是字母数字的组合</font>"
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
<select name=MM onchange="MMDD(this.value)">
</select>
<select name=DD>
</select>
</form>
<script language="JavaScript"><!--
function window.onload()
{
strYYYY = document.form1.YYYY.outerHTML;
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["北京","天津","上海","重庆","香港","澳门"],
["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],
return true;
}
return true;
}
function checkForm(){
if(!checkName()) return false;
if(!checkPsd1()) return false;
return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="js省份城市联动.htm" onSubmit="return checkForm()">
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
//--></script>
</body>
</html>
下面就是出生地，个人简历，学历，邮箱的输入和填写了。
<script type="text/javascript">
如果输入的不正确，会有相应的提示并进行重新的输入
如果用户能够输入正确的格式，则提示输入正确并进行下一步的输入。
下面就是出生日期、性别、爱好的输入了
<body>
<form name=form1>
<select name=YYYY onchange="YYYYMM(this.value)">
</select>
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
document.form1.DD.value = new Date().getDate();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
}
document.form1.YYYY.outerHTML = str +"</select>";
var str = strMM.substring(0, strMM.length - 9);//赋月份的下拉框
for (var i = 1; i < 13; i++)
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
4．使用div显示提示信息。
二、实验内容：
1．设计网站用户注册页面，综合应用表格、表单等，具体要求：
用户文本框：要求长度6-12位；
密码框：要求长度6-12位；字母数字的组合，不能有其他字符；
确认密码框：与密码框一致；
年龄文本框：必须是数字，且值大于0；
电子邮件文本框：
性别单选框；
爱好复选框：至少选择两项；
<td><div id="div1">请输入密码，长度6-12，字母和数字的组合</div></td>
</tr>
<tr>
<td>确认密码</td>
<td><input name="textpsd2" type="text" id="textpsd2"></td>
<td> </td>
</tr>
if (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],
["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
<td width="322"><div id="divName">用户名长度6-12</div></td>
</tr>
<tr>
<td>密码</t来自百度文库>
<td><input name="textpsd1" type="password" id="textpsd1" onBlur="checkPsd1()"></td>
<table width="600" border="0" align="center">
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td width="82">用户名</td>//用户名应该是6-12位，对于这个长度是有要求的。
<td width="182"><input name="textName" type="text" id="textName" onBlur="checkName()"></td>
if(userName.length <6 || userName.length >12){
divName.innerHTML="<font color=red>长度错误</font>";
return false
}
else{
divName.innerHTML="<font color=green>正确</font>";