一、
知识点3：验证表单内容--使用String对类验证邮箱
代码：
1.html文件
<link href="css/register.css" rel="stylesheet">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("#myform").submit(function(e) {
var email = $("#myform :text").val();
//判断是否为空
if(email==""){
alert("邮箱不能为空");
return false;
}
if(email.indexOf("@")==-1){
alert("邮箱格式错误，必须包括@");
return false;
}
if(email.indexOf(".")==-1){
alert("邮箱格式错误，必须包括.");
return false;
}
return true;
});
});
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" /></div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form action="success.html" id="myform" method="post" name="myform" >
<ul>
<li class="bold">登录休闲网</li>
<li><span>Email：</span><input type="text" class="inputs" /></li>
<li><span>密码：</span><input type="password" class="inputs" /></li>
<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
</ul>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
2.CSS文件
*{padding:0; margin:0;}
body{
font-size:12px;
color:#000;
line-height:25px;
}
ul,li{list-style: none;}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
headerLeft{width:200px;
float:left;
}
headerRight{width:160px;
float:right;
color:#FFF;
}
center{
width:362px;
text-align:center;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.inputs{width:110px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:45px;
height:45px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
.register{width: 350px; margin: 5px auto; border: 1px #cccccc solid; border-radius: 5px; background: #efefef; clear: both;}
.register li{height: 35px; line-height: 35px;}
.register span{display: inline-block; width: 80px; text-align: right;}
.register li:last-of-type{padding-left: 90px;}
footer{text-align:center;
color:#333;
line-height:35px;
}
footer a{
color:#333;
text-decoration:underline;
}
footer:hover{
color:#333;
text-decoration:none;
}
二、
知识点4：验证表单内容--文本框内容的验证
代码：
1.html文件
<link href="css/leisure.css" rel="stylesheet">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
("#myform").submit(function(e) {
var pwd = ("#repwd").val();
if(pwd!=repwd){
alert("两次输入的密码不一致");
return false;
}
var user = $("#user").val();
if(user==""){
alert("姓名不能为空");
return false;
}
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1);
if(isNaN(j)==false){
alert("姓名中不能包含数字");
return false;
}
}
return true;
});
});
</script>
</head>
<body>
<div id="header" class="main">
<div id="headerLeft">
<img src="images/logo.gif" />
</div>
<div id="headerRight">注册 | 登录 | 帮助</div>
</div>
<div class="register">
<form method="post" name="myform" id="myform">
<h1 class="bold">注册休闲网</h1>
<dl>
<dt>您的Email：</dt>
<dd><input id="email" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt>输入密码：</dt>
<dd><input id="pwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt>再输入一遍密码：</dt>
<dd><input id="repwd" type="password" class="inputs" /></dd>
</dl>
<dl>
<dt>您的姓名：</dt>
<dd><input id="user" type="text" class="inputs" /></dd>
</dl>
<dl>
<dt>性别：</dt>
<dd>
<input name="sex" type="radio" value="1" checked="checked" />男
<input name="sex" type="radio" value="0" />女</dd>
</dl>
<dl>
<dt class="left">出生日期：</dt>
<dd><select name="year">
<option value="1998">1998</option>
</select>年
<select name="month">
<option value="1">1</option>
</select>月
<select name="day">
<option value="12">12</option>
</select>日</dd>
</dl>
<dl>
<dt> </dt>
<dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
</dl>
</form>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a></div>
</body>
</html>
2.CSS文件
*{padding:0; margin:0;}
body{
font-size:13px;
color:#000;
line-height:25px;
}
.main{
float:none;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear:both;
}
header{
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
height: 36px;
}
headerLeft{width:200px;
float:left;
}
headerRight{width:160px;
float:right;
color:#FFF;
}
center{
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
width:100%;
}
.register{margin: 0 auto; width: 350px; clear: both;}
.register dl dt{width:35%;
text-align:right;
height:25px;
float: left;
}
.register dl dd img{vertical-align: middle;}
.bg{
background-image: url(../images/dl_l_bg.gif);
background-repeat: repeat-y;
}
.inputs{width:110px;
height:16px;
border:solid 1px #666666;
}
.bold{
font-size:18px;
font-weight:bold;
text-align:center;
line-height:35px;
height:35px;
}
.rb1{
height:20px;
color:#fff;
font-size:13px;
background:#d32c47;
padding:3px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
cursor:pointer;
}
footer{text-align:center;
color:#333;
line-height:35px;
}
footer a{
color:#333;
text-decoration:underline;
}
footer hover{
color:#333;
text-decoration:none;
}
fileImgHeader,#imgHeader{ margin-right: 5px;
float: left;}