Web表单验证实例.docx
- 文档编号:15404701
- 上传时间:2023-07-04
- 格式:DOCX
- 页数:10
- 大小:32.83KB
Web表单验证实例.docx
《Web表单验证实例.docx》由会员分享,可在线阅读,更多相关《Web表单验证实例.docx(10页珍藏版)》请在冰点文库上搜索。
Web表单验证实例
Web表单验证实例
学习交流,非诚勿扰:
1244399731
一、实验要求:
创建一个页面,命名为“表单验证.html”。
在页面上创建一个表单,命名为“regform”,其中包含元素为:
文本框(username,获取用户名)、文本框(password,密码)、文本框(passwordcheck,对密码进行确认)、单选按钮(radiosex)选择性别、兴趣爱好(hobbycheckbox,至少可选择5项爱好)、下拉列表(homedownselect,用于选择籍贯)、文本域(briefarea,用于获得用户简介)、提交按钮(formsubmit)、重置按钮(formreset)。
当提交表单时,对表单中的信息进行验证并给出提示,要求如下:
(1)要求验证上面的所有元素的值必须不为空,即用户必须填写相关内容。
(2)用户名、密码必须是6-20位。
(3)要求password与passwordcheck必须相同。
(4)在表达允许提交的情况下,完成下面动作:
打开一个新窗口wid,将上述验证后的表单信息在wid中显示出来。
二、源代码:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http:
//www.w3.org/TR/html4/loose.dtd">
--
.title{
font-family:
"宋体";
font-size:
18pt;
font-weight:
bold;
color:
#666666;
}
.style1{font-family:
"宋体";font-size:
18pt;font-weight:
bold;color:
#333333;}
.Left{
font-family:
"宋体";
font-size:
14pt;
font-weight:
bold;
color:
#333333;
}
.neirong{
font-family:
"宋体";
font-size:
10pt;
font-weight:
bold;
color:
#000000;
}
body{
background-image:
url(19.jpg);
}
-->
functioncheckForm()
{
varusername_exg=/\w{6,20}/;
varpassword_exg=/[0-9]{6,20}/;
if(username_exg.test(document.regform.username.value)==false)//验证用户名格式
{
alert("用户名必须是6到20的字符!
");
document.regform.username.focus();
returnfalse;
}
if(password_exg.test(document.regform.password.value)==false)//验证密码格式
{
alert("密码必须是6到20个数字!
");
document.regform.password.focus();
returnfalse;
}
if(document.regform.password.value!
=document.regform.passwordcheck.value)//验证两次密码是否一致
{
alert("密码输入不一致!
");
document.regform.password.focus();
returnfalse;
}
varflag1=false,ob;
for(varj=1;j<=3;j++)
{
ob=eval("document.regform.radiosex"+j);
if(ob.checked==true)
{
{flag1=true;
z=ob.value;
}
}
}
if(flag1==false)
{
alert("请选择您的性别!
");
returnflag1;
}
varstr1="",flag=false,obj;
for(vari=1;i<6;i++)//检查每一个checkbox的状态
{
obj=eval("document.regform.hobbycheckbox"+i);
if(obj.checked==true)
{
flag=true;
str1=str1+""+obj.value;
}
}
if(flag==false)
{
alert("请选择您的业余爱好!
");
returnflag;
}
if(document.regform.homedownselect.value=="未选中")
{
alert("请选择个人的籍贯!
!
");
returnfalse;
}
if(document.regform.briefarea.value=="")
{
alert("简介不能为空哦!
")
returnfalse;
}
varn=document.regform.username.value;
varp=document.regform.password.value;
varhom=document.regform.homedownselect.value;
varv=document.regform.briefarea.value;
varu="用户名:
";
varp1="密码:
";
varx="性别:
";
vara1="兴趣爱好:
"
varj="籍贯:
";
varg="个人简介:
";
varwid=window.open("","","height=260width=400top=200left=400status=yes")
wid.document.write("
恭喜!您的信息已提交成功!
您的信息已提交成功!
"+u+""+n+"
"+p1+""+p+"
"+x+""+z+"
"+a1+""+str1+"
"+j+""+hom+"
"+g+"
"+v
)
wid.status="表单信息反馈!
"
returntrue;
}
6~20个字符
6~20个数字
保密
男
女
读书
运动
书法
音乐
电影
3、表单设计:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 表单 验证 实例