表单验证练习 ---- js篇
2024-05-07 00:06:29
一、表单登录验证
1.1、登录页面
1.1.1、头部
V id=head><!--首页的头部-->
<TABLE width="100%" border=0><TBODY><TR><TD width="55%" rowspan=2><DIV align=left><IMG height=31 src="登录页面_files/logo.gif" width=240></DIV></TD><TD width="12%"><DIV align=right><IMG height=24 src="登录页面_files/banner_1.gif" width=51></DIV></TD><TD width="6%"><DIV align=right><IMG height=24 src="登录页面_files/banner_2.gif" width=51></DIV></TD><TD width="8%"><DIV align=right><IMG height=24 src="登录页面_files/banner_3.gif" width=73></DIV></TD><TD width="5%"><DIV align=right><IMG height=24 src="登录页面_files/banner_4.gif" width=39></DIV></TD><TD width="7%"><DIV align=right><IMG height=24 src="登录页面_files/banner_5.gif" width=62></DIV></TD><TD width="7%"><DIV align=right><A href="../../贯穿案例/client_center/FrameSet.html" target=_blank><IMG height=24 src="登录页面_files/banner_6.gif" width=61 border=0></A></DIV></TD></TR><TR><TD colspan=6><DIV align=right>您好，欢迎来淘宝！[<A href="../../贯穿案例/register/register.html" target=_self>免费注册</A>][<A href="../../贯穿案例/login/login.htm" target=_self>登录</A>] 阿里旺旺 支付宝 </DIV></TD></TR></TBODY></TABLE>
<TABLE cellspacing=0 cellpadding=0 width="100%" border=0><tbody><TR><TD><IMG height=35 src="登录页面_files/table_1.gif" width=950></TD></TR><TR align=left><TD><TABLE style="VERTICAL-ALIGN: top" height=55 cellspacing=0 cellpadding=0 width=950 background=登录页面_files/slice_1.gif border=0><FORM id=search_form action="" method=post><TBODY><TR><TD align=right width="11%"><SELECT name=search_type> <OPTION value=auction selected>搜索宝贝</OPTION> <OPTION value=shop>搜索店铺</OPTION> <OPTION value=nick>搜索掌柜</OPTION> <OPTION value=info>搜索资讯</OPTION> <OPTION value=web>搜索网页</OPTION></SELECT>
</TD><TD width="89%"><LABEL><INPUT name=textfield> <SELECT id=cat name=cat> <OPTION value="" selected>所有分类</OPTION> <OPTION value=25>玩具/动漫/模型/卡通</OPTION> <OPTION value=50008075>购物优惠券/门票/美容健身卡</OPTION> <OPTION value=50007216>鲜花速递/蛋糕配送/园艺花艺</OPTION> <OPTION value=50003754>网店服务/物流/个性/家政/婚庆</OPTION></SELECT> <INPUT type=submit value=" 搜 索 " name=Submit> <SPAN class=fontcolor_white>[ 高级搜索 ] [ 使用帮助 ] </SPAN></LABEL></TD></TR><TR class=fontcolor_white><TD align=right>热门搜索：</TD><TD align=left> T恤 女鞋 手机 比基尼 魔兽世界 减肥 七分裤 娃娃衫 特价机票 连衣裙 Q币 美白防晒 热销品 二手房 </TD></TR></FORM></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
1.1.2、中间部分
<DIV id=content><!--首页的中间部分-->
<DIV id=middle><!--防止topbar_style1_bk.gif和logo.gif在firefox浏览器里显示时处在同一行-->
<TABLE cellpadding=0 width=760 border=0><TBODY><TR><TD align=left width=378 height=460><TABLE height=458 width=378 border=0><TBODY><TR height="20%"><TD><IMG height=57 src="登录页面_files/title_login_2.gif" width=150></TD><!--高度占表格高度的五分之一--></TR><FORM name="userfrm" onSubmit=" return checkForm( )" action="login_success.htm" method="post"><TR valign=top height="43%"><TD align=right><TABLE width=350 border=0><TBODY><TR align=left height="25%"><TD>会员名:</TD><TD><INPUT class=register_textBroader id=txtName size=15 name=txtName> （可包含 a-z、0-9 和下划线）</TD></TR><TR align=left height="25%"><TD>密 码:</TD><TD><INPUT class=register_textBroader id=txtPass type=password size=15 name=txtPass>（至少包含 6 个字符）</TD></TR><TR><TD align=middle colspan=2 height=65><INPUT type=submit value=" 登 录 " name=Button> <INPUT type=reset value=" 重 填 " name=Reset> </TD></TR></TBODY></TABLE></TD></TR></FORM><TR height="37%"><TD><IMG height=168 src="登录页面_files/register_leftfoot.gif" width=427></TD></TR></TABLE></TD><TD align=left width=378 height=460><IMG height=399 alt="" src="登录页面_files/register_right.gif"
width=333></TD></TR></TBODY></TABLE></DIV></DIV>
中间部分js
<SCRIPT language="javascript" >function checkForm( )
{var strName = document.userfrm.txtName.value;var strPass = document.userfrm.txtPass.value;//var i;if(strName.length != 0){ for(var i=0;i<strName.length;i++){var charTest=strName.toLowerCase( ).charAt(i);if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') ){alert("会员名包含非法字符，只能包括 a-z、0-9 和下划线");return false;}}}else{alert("请输入用户名");return false;}if(strPass== ""){alert("未输入密码 \n" + "请输入密码");return false;}else{if(strPass.length <6){alert("密码位数不能少于6位，请重新输入！");return false}}return true;
}</SCRIPT>1.1.3、页脚
<DIV id=foot><!--首页页脚-->
<TABLE width="100%"><TBODY><TR><TD><HR width=950></TD></TR><!--画直线--><TR><TD><DIV class=fontcolor_blue><A href="../../贯穿案例/login/login.htm#">关于淘宝 广告服务</A> <A href="../../贯穿案例/login/login.htm#">合作伙伴</A> <A href="../../贯穿案例/login/login.htm#">客户中心</A> <A href="../../贯穿案例/login/login.htm#">诚征英才</A> <A href="../../贯穿案例/login/login.htm#">联系我们</A> <A href="../../贯穿案例/login/login.htm#">网站地图</A> <A href="../../贯穿案例/login/login.htm#">热门品牌 版权说明</A> </DIV></TD></TR><TR><TD><DIV>全球阿里巴巴 ： <A href="../../贯穿案例/login/login.htm#">中国站</A> <A href="../../贯穿案例/login/login.htm#">国际站 日文站 淘宝站 支付宝 中国雅虎 口碑网 阿里软件 淘宝推广联盟 </A></DIV></TD></TR><TR><TD><DIV>Copyright 2003-2007, 版权所有 TAOBAO.COM</DIV></TD></TR><TR><TD><DIV class=fontcolor_blue>ICP证：浙B2-20050291</DIV></TD></TR><TR><TD><DIV>广告经营许可证号：3301061000468</DIV></TD></TR></TBODY></TABLE></DIV><!-- InstanceEndEditable --><!-- InstanceEnd --></BODY></HTML>
1.1.4、登录成功页面
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>无标题文档</TITLE>
</HEAD><BODY>
欢迎光临！！！！
</BODY>
</HTML>
1.1.5、css样式
BODY {MARGIN-TOP: 7px; FONT-SIZE: 12px; FONT-FAMILY: "ו",sans-serif
}
A:link {COLOR: #000000
}
A:visited {COLOR: #999999
}
A:hover {COLOR: #cc0000
}
#head {MARGIN: 0px auto; WIDTH: 950px; HEIGHT: 140px
}
#search_form {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; MARGIN: 0px auto; WIDTH: 950px; PADDING-TOP: 1px; HEIGHT: 55px
}
.fontcolor_white {FONT-SIZE: 12px; COLOR: #ffffff
}
#content {FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 950px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
}
#content A {COLOR: #0033ff; TEXT-DECORATION: none
}
#foot A {COLOR: #0033ff
}
#content A:hover {COLOR: #ff3300
}
#foot A:hover {COLOR: #ff3300
}
.fontcolor_blue {FONT-SIZE: 12px; COLOR: blue
}
.font_bold {FONT-WEIGHT: bold; FONT-SIZE: 16px
}
.tableBorder {BORDER-RIGHT: #ff9900 2px dashed; PADDING-LEFT: 5px; PADDING-TOP: 10px
}
.tablePad {PADDING-LEFT: 10px
}
#foot {MARGIN: 0px auto; WIDTH: 950px; HEIGHT: 93px; TEXT-ALIGN: center
}
.login_success1 {FONT-WEIGHT: bold; FONT-SIZE: 24px
}
.login_success2 {FONT-SIZE: 36px
}
.login_success3 {FONT-SIZE: 24px
}
.register_textBroader {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid
}
.register_table_line {FONT-SIZE: 14px; LINE-HEIGHT: 35px; MARGIN-RIGHT: 5px; TEXT-ALIGN: right
}
#BraPanel {FONT-SIZE: 14px; BACKGROUND: url(../../images/portal_bg.jpg) no-repeat 0pt 50%; MARGIN: -9px 0px 0px; WIDTH: 180px; HEIGHT: 285px
}
.glowingtabs {FLOAT: left; WIDTH: 180px; HEIGHT: 50px
}
.glowingtabs IMG {BORDER-TOP-WIDTH: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 4px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.glowingtabs UL {PADDING-RIGHT: 0px; MARGIN-TOP: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN-LEFT: 5px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.glowingtabs LI {PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.tabcontainer {PADDING-BOTTOM: 5px; WIDTH: 180px; PADDING-TOP: 2px; HEIGHT: 165px
}
.tabcontent1 {DISPLAY: none; MARGIN-LEFT: 8px
}
.tabcontent2 {DISPLAY: none; MARGIN-LEFT: 8px
}
#tab_foot {MARGIN: 0px -5px 5px 4px; WIDTH: 180px; HEIGHT: 55px
}
#tab_foot IMG {PADDING-LEFT: 4px; WIDTH: 167px; HEIGHT: 50px
}
1.2、注册
1.2.1、注册1之js
<script language="javascript" type="text/javascript">
//checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() &&
function validateform(){if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck() && agree( )) return true;elsereturn false;}//validate Name
function checkUserName(){
var fname = document.userfrm.fname.value;
var lname = document.userfrm.lname.value;
// validate first Name
if(fname.length != 0){for(i=0;i<fname.length;i++){var ftext = fname.substring(i,i+1);if(ftext < 9 || ftext > 0){alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");document.userfrm.fname.focus();document.userfrm.fname.select();return false}}
}
else{alert("请输入“名字”文本框");document.userfrm.fname.focus();return false
}// Validate last name
if(lname.length != 0){for(j=0;j<lname.length;j++){var ltext = lname.substring(j,j+1);if(ltext < 9 || ltext > 0){alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符");document.userfrm.lname.focus();document.userfrm.lname.select();return false}}
}
else{alert("“姓氏”文本框为空");document.userfrm.lname.focus();return false;}
return true;
}
// Login Name Validation
function sNameCheck(){
/*var sname = document.userfrm.sname.value;
var illegalChars = /\W/; if(sname.length != 0){if(illegalChars.test(sname)){alert("登录名无效");document.userfrm.sname.select();return false;}}else{alert("是否忘记输入登录名？");document.userfrm.sname.focus();return false}return true;*/var strName = document.userfrm.sname.value;if(strName.length != 0){ for(var i=0;i<strName.length;i++){var charTest=strName.toLowerCase( ).charAt(i);if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') ){alert("会员名包含非法字符，只能包括 a-z、0-9 和下划线");return false;}}}else{alert("请输入用户名");return false;}return true;
}
//Validate password
function passCheck(){
var userpass = document.userfrm.pass.value;
var ruserpass = document.userfrm.rpass.value;if(userpass == "" || ruserpass == ""){alert("未输入密码 \n" + "请输入密码");document.userfrm.pass.focus();return false;}// Check if password length is less than 6 charactor.if(userpass.length < 6){alert("密码必须多于或等于 6 个字符。\n");document.userfrm.pass.focus();return false;}else if(userpass != ruserpass){alert("两次输入的密码不一致");document.userfrm.rpass.select();return false;}return true;
}// Email Validation
function emailcheck(){
var usermail = document.userfrm.email.value;if(usermail.length == "0"){alert("Email 文本框为空")document.userfrm.email.focus();return false;}//无@符号此表达式usermail.indexOf("@")返回值为-1if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){alert("Email 地址无效");return false;}return true;
}function bdaycheck(){
var bmonth = document.userfrm.bmon.value;
var bday = document.userfrm.bday.value;
var byear = document.userfrm.byear.value;
//alert(bmonth + "/" + bday + "/" + byear);if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){alert("请输入您的生日");document.userfrm.bmon.focus();return false;}for(i=0; i<bday.length; i++){var bnum = bday.substring(i,i+1)if(!(bnum < 9 || bnum > 0)){alert("生日无效");document.userfrm.bday.focus();return false;}}for(j=0; j<byear.length; j++){var bynum = byear.substring(j,j+1)if(!(bynum < 9 || bynum > 0)){alert("生日无效");document.userfrm.byear.focus();return false;}}//验证出生年月日是否在指定的范围内if (byear<1900||byear>2120){ alert("您输入的出生年份超出范围！\n请重新输入！");document.userfrm.byear.focus();return(false);}else if(bmonth<0||bmonth>12){alert("您输入的月份超出范围！\n请重新输入！");document.userfrm.bmon.focus();return(false);}else if(bday<0||bday>31){alert("您输入的日期超出范围!\n请重新输入！");return(false);}return true;
}
//check sex
function genderCheck(){
var usergen = document.userfrm.gen.length;for(i=0;i<usergen;i++){if(document.userfrm.gen[i].checked){return true;}if (i==usergen-1){alert("请选择性别");return false;}}return true;
}
function agree( )
{if (document.userfrm.okradio[0].checked==false){alert("您必须同意淘宝网的协议！才能加入会员");return false;}elsereturn true;
}1.2.2、注册1之html
<table width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF"><form name="userfrm" method="post" action="register_success.htm" onsubmit="return validateform( )"><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">名字：</td><td width="507" align="left" bordercolor="#E7E3E7"><input name="fname" type="text" class="register_textBroader" id="fname" size="24"></td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">姓氏：</td><td align="left" bordercolor="#E7E3E7"><input name="lname" type="text" class="register_textBroader" id="lname" size="24"></td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">登录名：</td><td align="left" bordercolor="#E7E3E7"> <input name="sname" type="text" class="register_textBroader" id="sname" size="24">
（可包含 a-z、0-9 和下划线）</td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">密码：</td><td align="left" bordercolor="#E7E3E7"> <input name="pass" type="password" class="register_textBroader" id="pass" size="26">
（至少包含 6 个字符） </td></tr><tr class="register_table_line"><td width="160" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</td><td height="0" align="left" bordercolor="#E7E3E7"><input name="rpass" type="password" class="register_textBroader" id="rpass" size="26"></td></tr><tr class="register_table_line"><td width="160" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</td><td height="0" align="left" bordercolor="#E7E3E7"><input name="email" type="text" class="register_textBroader" id="email" size="24">（必须包含 @ 字符）</td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">性别：</td><td align="left" bordercolor="#E7E3E7"><input name="gen" type="radio" value="男" checked><img src="data:images/Male.gif" width="23" height="21">男 <input name="gen" type="radio" value="女" class="input"><img src="data:images/Female.gif" width="23" height="21">女</td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">爱好：</td><td align="left" bordercolor="#E7E3E7"><label><input type="checkbox" name="checkbox" value="checkbox"></label>运动 <label><input type="checkbox" name="checkbox2" value="checkbox"></label>聊天 <label><input type="checkbox" name="checkbox22" value="checkbox"></label>玩游戏</td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">出生日期：</td><td align="left" bordercolor="#E7E3E7"><input name="byear" class="register_textBroader" id="byear" onfocus="this.value=''" value="yyyy" size=4 maxlength=4 > 年  <select name="bmon" ><option value="" selected>[选择月份]<option value=0>一月<option value=1>二月<option value=2>三月<option value=3>四月<option value=4>五月<option value=5>六月<option value=6>七月<option value=7>八月<option value=8>九月<option value=9>十月<option value=10>十一月<option value=11>十二月 </select> 月  <input name="bday" class="register_textBroader" id="bday" onfocus="this.value=''" value="dd" size=2 maxlength=2 >日 </td></tr><tr class="register_table_line"><td width="160" height="35" align="right" bgcolor="#E7FBFF"><input type="reset" name="Reset" value=" 重 填 "></td><td height="35" align="left" bordercolor="#E7E3E7"><input type="submit" name="Button" value="同意以下服务条款，提交注册信息"></td></tr><tr><td colspan="2"><table width="760" border="0"><tr><td height="36"><h4><img src="data:images/read.gif" width="35" height="26">阅读淘宝网服务协议 </h4></td></tr><tr><td height="120"><textarea name="textarea" cols="80" rows="6">
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。 </textarea></td></tr></table></td></tr></form>
</table>1.2.3、注册2
<script language="javascript" type="text/javascript">
//sNameCheck() && passCheck() && bdaycheck()
function validateform(){if(sNameCheck() && passCheck()&&bdaycheck()) return true;elsereturn false;
}// Login Name Validation
function sNameCheck(){var strName = document.userfrm.sname.value;if(strName.length != 0){ return true;}else{alert("请输入用户名");return false;}
}//Validate password
function passCheck(){
var userpass = document.userfrm.pass.value;
var ruserpass = document.userfrm.rpass.value;if(userpass == "" || ruserpass == ""){alert("未输入密码 \n" + "请输入密码");document.userfrm.pass.focus();return false;}// Check if password length is less than 6 charactor.if(userpass.length < 6){alert("密码必须多于或等于 6 个字符。\n");document.userfrm.pass.focus();return false;}else if(userpass != ruserpass){alert("两次输入的密码不一致");document.userfrm.rpass.select();return false;}return true;
}function bdaycheck(){
var bmonth = document.userfrm.bmon.value;
var bday = document.userfrm.bday.value;
var byear = document.userfrm.byear.value;
//alert(bmonth + "/" + bday + "/" + byear);if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){alert("请输入您的生日");document.userfrm.bmon.focus();return false;}for(i=0; i<bday.length; i++){var bnum = bday.substring(i,i+1)if(!(bnum < 9 || bnum > 0)){alert("日期无效");document.userfrm.bday.focus();return false;}}if(byear.substring(0,1)==2&&byear.substring(1,2)==0) //年份必须以20打头{for(j=2; j<byear.length; j++){var bynum = byear.substring(j,j+1);if(!(bynum < 9 || bynum > 0)){alert("年份无效");document.userfrm.byear.focus();return false;}}}else{alert("年份必须以20打头");return false;}//验证出生年月日是否在指定的范围内if (byear<1900||byear>2120){ alert("您输入的出生年份超出范围！\n请重新输入！");document.userfrm.byear.focus();return(false);}else if(bmonth<0||bmonth>12){alert("您输入的月份超出范围！\n请重新输入！");document.userfrm.bmon.focus();return(false);}else if(bday<0||bday>31){alert("您输入的日期超出范围!\n请重新输入！");return(false);}return true;
}
</script><table width="950" border="0" align="center"><tr><td width="250" height="75"><img src="data:images/logo.gif" width="250" height="40"></td><td height="75"><img src="data:images/reg.gif" width="250" height="50"></td><td width="260" height="75"> </td></tr>
</table><table width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF"><form name="userfrm" method="post" action="register_success.htm" onsubmit="return validateform( )"><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">登录名：</td><td align="left" bordercolor="#E7E3E7"> <input name="sname" type="text" class="register_textBroader" id="sname" size="24">
（可包含 a-z、0-9 和下划线）</td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">密码：</td><td align="left" bordercolor="#E7E3E7"> <input name="pass" type="password" class="register_textBroader" id="pass" size="26">
（至少包含 6 个字符） </td></tr><tr class="register_table_line"><td width="160" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</td><td height="0" align="left" bordercolor="#E7E3E7"><input name="rpass" type="password" class="register_textBroader" id="rpass" size="26"></td></tr><tr class="register_table_line"><td width="160" align="right" bgcolor="#E7FBFF">出生日期：</td><td align="left" bordercolor="#E7E3E7"><input name="byear" class="register_textBroader" id="byear" onfocus="this.value=''" value="yyyy" size=4 maxlength=4 > 年  <select name="bmon" ><option value="" selected>[选择月份]<option value=0>一月<option value=1>二月<option value=2>三月<option value=3>四月<option value=4>五月<option value=5>六月<option value=6>七月<option value=7>八月<option value=8>九月<option value=9>十月<option value=10>十一月<option value=11>十二月 </select> 月  <input name="bday" class="register_textBroader" id="bday" onfocus="this.value=''" value="dd" size=2 maxlength=2 >日 </td></tr><tr class="register_table_line"><td width="160" height="35" align="right" bgcolor="#E7FBFF"><input type="reset" name="Reset" value=" 重 填 "></td><td height="35" align="left" bordercolor="#E7E3E7"><input type="submit" name="Button" value="同意以下服务条款，提交注册信息"></td></tr><tr><td colspan="2"><table width="760" border="0"><tr><td height="36"><h4><img src="data:images/read.gif" width="35" height="26">阅读淘宝网服务协议 </h4></td></tr><tr><td height="120"><textarea name="textarea" cols="80" rows="6">
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提供等处理，而无须征得用户的同意。
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。 </textarea></td></tr></table></td></tr></form>
</table>
1.2.4、样式
/* CSS Document */body {margin-top:7px;font-family:"宋体",sans-serif;font-size:12px;
}
a:link{
color:#000000;
}
a:visited{
color:#999999;
}
a:hover{
color:#CC0000;
}#head{ !头部样式float:left;margin:0px auto 0px auto;width:950px;height:140px;
}
#search_form{margin:0px auto 0px auto;padding:1px 0px 1px 0px;width:950px;height:55px;
}
.fontcolor_white{
color:#FFFFFF;
font-size:12px;
}#content{ !中间内容部分样式float:left;margin:0px auto 0px auto;width:950px;/*height:720px; */text-align:left;background-color:#FFFFFF;font-size:12px;
}
#content a{
color:#0033FF;
text-decoration:none;
}#foot a{
color:#0033FF;
}
#content a:hover,#foot a:hover{
color:#FF3300;
}
.fontcolor_blue{
color:blue;
font-size:12px;
}
.font_bold{font-size: 16px;font-weight: bold;
}
.tableBorder {border-right-width: 2px;border-right-color:#FF9900;border-right-style:dashed;padding-top:10px;padding-left:5px;
}
.tablePad {
padding-left:10px;
}#foot{margin:0px auto 0px auto;width:950px;height:93px;text-align:center;
}.login_success1 {font-size: 24px;font-weight: bold;
}
.login_success2 {font-size: 36px}
.login_success3 {font-size: 24px}.register_textBroader
{border-width:1px;border-style:solid;
}
.register_table_line{font-size:14px;line-height:35px;margin-right:5px;text-align:right;
}/* CSS Document */
#BraPanel {
height:285px;
width:180px;
background:url(../images/portal_bg.jpg) no-repeat scroll 0pt;
font-size:14px;
margin:-9px 0px 0px 0px;
}.glowingtabs{
float:left;
width:180px;
height:50px;
}
.glowingtabs img{
float:left;
margin-top:5px;
padding-left:4px;
border:0px;
}
.glowingtabs ul{
list-style-type: none;
margin-top:5px;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding:0;
}
.glowingtabs li{
display:inline;
padding:0;
}.tabcontainer{
padding-top:2px;
padding-bottom:5px;
width:180px; /*width of 2nd level sub menus*/
height:165px; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}
.tabcontent1{
display:none;
margin-left:8px;
}
.tabcontent2{
display:none;
margin-left:8px;
}#tab_foot{
margin:0px -5px 5px 4px;
width:180px;
height:55px;
}
#tab_foot img{
padding-left:4px;
width:167px;
height:50px;
}1.3、日期格式验证
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>日期格式验证</TITLE>
<STYLE TY="text/css">
td{font-size:12px}
</STYLE>
<SCRIPT type="text/javascript">
function showDate(){var date1 = document.myform.date1.value;if(date1.length<10){alert("日期格式长度必须是10位");document.myform.date1.focus();}else if((date1.charAt(4)!="/")&&(date1.charAt(7)!="/")){alert("请按照年/月/日的格式输入");document.myform.date1.select();}else{var time = date1.split("/");if(isNaN(time[0])||isNaN(time[1])||isNaN(time[2])){alert("年月日输入必须是数字");document.myform.date1.select();}else{alert("你输入的日期是"+time[0]+"年"+time[1]+"月"+time[2]+"日");}}
}</SCRIPT>
</HEAD><BODY>
<FORM action="" method="post" name="myform"><TABLE width="338" height="145" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2" align="center"><H3>格式输入验证</H3></TD></TR><TR><TD width="126">日期格式yyyy/mm/dd</TD><TD width="212"><INPUT name="date1" type="text" size="20" maxlength="10"></TD></TR><TR><TD colspan="2" align="center"><INPUT name="showdate" type="button" value="显示输入" onClick="showDate()"></TD></TR></TABLE>
</FORM>
</BODY>
</HTML>
1.4、简单登录验证
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>登录验证</TITLE>
<STYLE type="text/css">
td{font-size:12px}
</STYLE>
<SCRIPT type="text/javascript">
function checkLogin(){var username=document.myform.userid.value;var userpass=document.myform.passwd.value;if(username==""){alert("请输入用户名");document.myform.userid.focus();return false;}else{for(var i=0;i<username.length;i++){var charTest=username.toLowerCase().charAt(i);if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z'))){alert("用户名包含非法字符，只能包括字母,数字");document.myform.userid.select();return false;}}}if(userpass==""){alert("请输入密码");document.myform.passwd.focus();return false;}else if(userpass.length<6){alert("密码输入错误，请重新输入");document.myform.passwd.select();return false}return true;
}</SCRIPT>
</HEAD><BODY>
<FORM NAME="myform" METHOD="POST" action="success.html" onSubmit="return checkLogin()">
<TABLE align="center">
<TR>
<TD>
<IMG src="data:images/Snap1.jpg"><DIV style="position:absolute; left: 490px; top: 216px; width: 356px;"><TABLE width="100%" height="100%" border=0 cellPadding=0 cellSpacing=0><TBODY><TR vAlign=top> <TD width="23%" height=27 align=right class=bld>用户名: </TD><TD height="27" align=left><INPUT TYPE="text" SIZE="20" NAME="userid"><BR>用户名由字母和数字组成</TD></TR><TR vAlign=top> <TD class=bld align=right height=27>密码: </TD><TD height="27" align=left><INPUT TYPE="password" SIZE="20" NAME="passwd"><BR>密码长度6位以上</TD></TR><TR vAlign=top> <TD class=bld align=right height=40> </TD><TD align=left valign="middle"><A href="#"><INPUT name="submit" type="image" src="data:images/login.gif" width="101" height="22" border="0" ></A> </TD></TR></TABLE></DIV>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
1.5、邮件验证
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册信息验证</TITLE>
<STYLE type="text/css">
td{font-size:12px}
.top{
border-right:#d8d8ed 2px solid;
border-top:#d8d8ed 2px solid;
border-left:#d8d8ed 2px solid;
}
.btnPic{
background-image:url(images/submit.gif);
width:99px;
height:25px;
margin:0px;
padding:0px;
border:0px;
}
</STYLE>
<SCRIPT type="text/javascript">
function checkForm(){var email = document.myform.email.value;var pass = document.myform.pass.value;var rpass = document.myform.rpass.value;var checked = document.myform.accept.checked;if (email==""){alert("电子邮件不能为空!");document.myform.email.focus();return false;}else if ((email.indexOf("@",0)==-1)||(email.indexOf(".",0)==-1)){alert("电子邮件格式不正确\n必须包含@符号和.符号！");document.myform.email.select();return false;}if(pass==""){alert("密码不能为空");document.myform.pass.focus();return false;}else if(pass.length<6){alert("密码长度不能小于6位");document.myform.pass.select();return false;}//确认密码一致性验证if(rpass==""){alert("请输入重输密码进行确认");document.myform.rpass.focus();return false;}else if(rpass!=pass){alert("确认密码与密码输入不一致");document.myform.rpass.select();return false;}if(!checked){alert("您必须接受智联协议才能进行下一步");document.myform.accept.focus();return false;}return true;
}
</SCRIPT>
</HEAD><BODY>
<DIV align="center"> <IMG src="data:images/Snap2.jpg"></DIV>
<FORM name="myform" action="success.html" method="post" onSubmit="return checkForm()">
<TABLE cellSpacing="0" cellPadding="0" width="670" align="center" border="0"><TBODY><TR><TD height="30"><IMG src="data:images/Snap4.jpg"></TD></TR><TR><TD bgColor="#d8d8ed"><TABLE cellSpacing="5" cellPadding="0" width="100%" border="0"><TBODY><TR><TD align="right" width="190"><STRONG>E-mail：</STRONG></TD><TD><INPUT maxLength="100" size="20" name="email"> 请填写有效的E-mail地址作为下次登录的用户名<BR></TD></TR><TR><TD align="right" width="190"><STRONG>密码：</STRONG></TD><TD><INPUT type="password" size="20" value="" name="pass"> 不少于6个字符，不区分大小写<BR></TD></TR><TR><TD colSpan="2" height="2"></TD></TR><TR><TD align="right" width="190"><STRONG>重输密码：</STRONG></TD><TD><INPUT type="password" size="20" value="" name="rpass"><BR></TD></TR><TR><TD colSpan="2" height="7"></TD></TR><TR><TD></TD><TD>请查看并同意智联招聘用户协议：<BR><INPUT type="checkbox" name="accept">我接受智联招聘的 <A href="#" >用户协议</A> 和 <A href="#">隐私政策</A></TD></TR><TR><TD></TD><TD style="padding-left:100px"><INPUT id="btn" type="submit" class="btnPic" name="btn" value=""></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE></FORM>
<DIV align="center"><IMG src="data:images/Snap3.jpg"></DIV>
</BODY>
</HTML>
表单验证练习 ---- js篇相关推荐
- js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的 ...
- 关于Easy ui 的表单验证validate.js实时验证
新建 validType.js文件 1.一些常用的验证 $(function() {//设置text需要验证$('input[type=text]').validatebox();//自定义valid ...
- html表单判断字符数,JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
- js使用策略模式实现表单验证
使用策略模式实现表单验证 1.什么是策略模式 策略模式说起来很高大上,其实现实生活中很常见.比如,你要从老家去北京故宫游玩,可选的出行方式有坐火车.开车自驾.坐飞机等几种方式, 至于选择哪种出现方式要 ...
- 分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您 下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
- 真正简单的基于prototype的表单验证
由 searchadmin 于 周二, 10/16/2007 - 06:44 提交. 真正简单的基于prototype的表单验证 tag:prototype 数据验证 表单验证 validator j ...
- JavaWeb前端开发注册表单验证
注册表单验证 最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下 表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
- 自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
最新文章
- HDU 4300 Clairewd’s message
- C 线程池（不稳定的方案）
- mysql8.0 tar安装_CentOS7安装MySQL8.0 tar包
- 南林计算机课程表,南京林业大学课程表.doc
- OpenCV重复播放摄像头视频，循环播放摄像头(视频)文件，循环播放视频中某一段视频
- mysql 字段 英文 变 中文_Oracle将英文字符集数据转换成中文
- 中小学创客教室建设,教育创客空间整体解决方案
- 关于CUTFTP如何免费下载
- Android获取系统字体的大小,修改android系统字体大小
- SWUST OJ 492: The Dutch flag problem
- Win10自动更新后桌面文件不见了怎么办？
- linux编译poco静态库,Xcode 编译poco c++静态库
- 如何降低图片kb大小？教你两个快速压缩图片大小的方法！
- ipam：allocate ip 172.16.3.7 to node x.x.x.112 allocator failed, provided IP is already allocated
- 【从零学习openCV】IOS7下的人脸检测
- 关于“无穷”的概念---数学笔记“无穷”
- 高等数学笔记-乐经良老师-第八章-多元函数微分学（Ⅱ）
- 小红书竞品分析_App竞品分析报告：小红书VS洋码头
- SA（需求分析师）笔试题目整理
- mysql 自动复制_MySQL 复制搭建(附mysql自动搭建脚本)