<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录</title>
<link href="css/bootstrap.min.css" rel="stylesheet"></head><body><nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="./">jsp作业</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
</ul>
</div>
</div></nav><div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<form class="form-signin" target="submitFrame" method="post">
<h2 class="form-signin-heading">登录到jsp作业</h2>
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail" class="form-control" placeholder="请输入Email" required autofocus><br>
<label for="inputPassword">密码</label>
<input type="password" id="inputPassword" class="form-control" placeholder="请输入密码" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me" checked="checked">记住密码</label>
</div>
<button type="submit" class="btn btn-primary" id="btn-login">登录</button>
<a href="reg.html" class="btn btn-default">注册</a>
</form>
<iframe style="display: none" name="submitFrame" src="about:blank"></iframe>
</div>
<div class="col-md-4">
</div>
</div>
<script src="js/jquery.min.js"></script></body></html>
以下为个人原创教学例子，任何人引用需注明出自百度知道用户am7972,楼主可供参考该例子涵盖了文本框、密码框、下拉菜单、单选框、复选框及文本区的使用
同时在数据的使用方面涵盖了文本型、数值型、日期型、布尔型的使用
也涵盖了在会员信息入数据库前，进行严格的数据检查
不足处，JS验证还不是太完善，不过有服务端认证足够了
<title>会员注册</title>
<script type="text/javascript">
<!--function CheckForm()
{
if(document.userinfo.username.value == "")
{ alert("请输入姓名,姓名不能为空！")
document.userinfo.username.focus()
return false
}
if(document.userinfo.username.value.length >10)
{
alert("输入的姓名长度最多为10个字符！")
document.userinfo.username.focus()
return false
}
}
//--></script>
</head>
<body>
<table border="1" width="53%" bordercolorlight="#000000" cellspacing="0" id="table1" height="358" bordercolor="#000000" bordercolordark="#FFFFFF" cellpadding="0">
<form method="POST" action="bb.asp" name="userinfo" onsubmit="return CheckForm()">
<tr><td colspan="2" height="37"> <p align="center">会员注员</td></tr>
<tr> <td width="37%" align="right">姓名：</td> <td width="61%"><input type="text" name="username" value="libin" size="13"> </td></tr>
<tr> <td width="37%" align="right">密码：</td> <td width="61%"> <input type="password" name="userPassword" size="20" value="123"></td></tr>
<tr> <td width="37%" align="right">性别：</td> <td width="61%"><input type="radio" value="True" checked name="Sex">男 <input type="radio" name="Sex" value="False">女</td></tr>
<tr> <td width="37%" align="right">生日：</td> <td width="61%"> <input type="text" name="userSR" size="11" value="1985-03-12"></td></tr>
<tr> <td width="37%" align="right">年龄：</td> <td width="61%"><input type="text" name="userNL" size="9" value="13"></td></tr>
<tr> <td width="37%" align="right">爱好：</td> <td width="61%"> <input type="checkbox" name="ah" value="sw">上网<input type="checkbox" name="ah" value="ds" checked>读书 <input type="checkbox" name="ah" value="ty">体育</td></tr>
<tr> <td width="37%" align="right">上网方式：</td> <td width="61%">
<select size="1" name="swfs"><option selected value="bhsw">拨号上网</option><option value="wxsw">无线上网</option><option value="gxsw">光纤上网</option> </select>
</td></tr>
<tr> <td width="37%" align="right">个人简介：</td> <td width="61%"><textarea rows="9" name="userGrjs" cols="34"></textarea></td></tr><tr> <td colspan="2" height="38"> <p align="center"><input type="submit" value="提交" name="B1"> <input type="reset" value="重置" name="B2"></td>
</tr>
</form>
</table>
====bb.asp的会员注册非法数据监测====
<%
username = Request("username")
userPassword = Request("userPassword")
Sex = Request("Sex")
userSR = Request("userSR")
userNL = Request("userNL")
ah = Request("ah")
swfs = Request("swfs")
userGrjs = Request("userGrjs")
'判断数据合法性，绝对不能让非法数据进入系统
'判断姓名username合不合法，是否包含非法数据
username = Trim(username) '例如：" 张 三 "经过处理之后变成"张 三"
If username ="" Then
Response.write "姓名不能为空"
Response.End
End If
If Len(username)>10 Then
Response.write "姓名字数不能超过10个字" 'Len("Z")=1 Len("国")=2
Response.End
End If
For i = 1 To Len(username)
q = Mid(username,i,1)
If InStr("!@#$%^&*()_-+|<>?/"",.",q)>0 Then
Response.write "姓名不能包含特殊符号!@#$%^&*()_-+|<>?/"",."
Response.End
End If
Next
'判断密码合不合法，是否包含非法数据userPassword = Trim(userPassword)If userPassword ="" Then Response.write "密码不能为空" Response.EndEnd If
If Len(userPassword)>20 Then
Response.write "密码字数不能超过20个字"
Response.End
End If
'判断密码合不合法，是否包含非法数据
Sex = Trim(Sex)
If Sex = "" Then
Response.write "性别不能为空"
Response.End
End If
If Sex <>"True" And Sex <>"False" Then
Response.write "性别不能为不男不女"
Response.End
End If
'判断生日合不合法，是否包含非法数据
userSR = Trim(userSR)
If userSR ="" Then
Response.write "生日不能为空"
Response.End
End If
If Len(userSR)<8 Or Len(userSR)>10 Then '例如：2012-6-3 2012-11-23
Response.write "你输入的生日字数不对，应为2012-6-3或2012-11-23格式"
Response.End
End If
If IsDate(userSR)=False Then
Response.write "你输入的生日格式不能转化为日期，请核实"
Response.End
End If
If DateDiff("yyyy",userSR,Date())<1 Or DateDiff("yyyy",userSR,Date())>200 Then
Response.write "根据你输入的生日你可能小于1岁或已经超过200岁了，请核查重新输入"
Response.End
End If
'判断年龄合不合法，是否包含非法数据userNL = Trim(userNL)If userNL ="" Then
Response.write "年龄不能为空"
Response.End
End If
If IsNumeric(userNL)=False Then
Response.write "你输入的年龄不能转化为数值，请核查"
Response.End
End If
userNL = CInt(userNL)
If userNL<0 Or userNL>200 Then
Response.write "你输入的年龄不能小于0岁或者大于200岁，请核查"
Response.End
End If
'判断爱好合不合法，是否包含非法数据ah = Trim(ah) '选择多个爱好则系统会用，分开 //测试
ah = Replace(ah," ","")
arrAh = Split(ah,",")
For i = LBound(arrAh) To UBound(arrAh)
If arrAh(i)<>"sw" And arrAh(i)<>"ds" And arrAh(i)<>"ty" Then
Response.write i &"你选择的爱好有问题，请核查" &arrAh(i)
Response.End
End If
Next
'判断上网方式合不合法，是否包含非法数据swfs = Trim(swfs)If swfs = "" Then
Response.write "上网方式不能为空"
Response.End
End If
If swfs<>"bhsw" And swfs<>"wxsw" And swfs<>"gxsw" Then
Response.write "你选择的上网方式有问题，请核查"
Response.End
End If
'判断个人简介是否为空，是否超出1000个字
userGrjs = Trim(userGrjs)
If userGrjs = "" Then
Response.write "个人简介不能为空"
Response.End
End If
If Len(userGrjs) >1000 Then
Response.write "个人简介不能超过1000个字"
Response.End
End If
Response.write "数据合法性检测通过"
%>
====登陆的HTML代码可相信楼主参照会员注册代码应该没问题了====
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>贵美商城</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<script type="text/javascript">
// snameCheck() && passCheck()
function validateform(){
if(snameCheck() && passCheck())
return true
else
return false
}
// Screen Name Validation
function snameCheck(){
var sname = document.getElementsByName("sname")[0].value
var illegalChars = /\W/
if(sname.length != 0){
if(illegalChars.test(sname)){
document.getElementById("passMsg").innerHTML.replace(/'会员名无效'/,'')
document.getElementById("passMsg").innerHTML='会员名无效'
document.getElementsByName("sname")[0].select()
return false
}
}
else
{
document.getElementById("userMsg").innerHTML.replace(/'是否忘记输入会员名？'/,'')
document.getElementById("userMsg").innerHTML='是否忘记输入会员名？'
document.getElementsByName("sname")[0].focus()
return false
}
if(sname!=="zhangsan"){ //验证会员名必须为张三
document.getElementById("userMsg").innerHTML.replace(/'是否输入的会员名有错？'/,'')
document.getElementById("userMsg").innerHTML='是否输入的会员名有错？'
document.getElementsByName("sname")[0].focus()
return false
}
return true
}
function passCheck(){
var userpass = document.getElementsByName("pass")[0].value
var illegalChars = /[\W_]/// allow only charactors and numbers
// Check if Password field is blank.
if(userpass == ""){
document.getElementById("passMsg").innerHTML.replace(/'未输入密码 \n" + "请输入密码'/,'')
document.getElementById("passMsg").innerHTML='未输入密码 \n" + "请输入密码'
document.getElementsByName("pass")[0].focus()
return false
}
// Check if password length is less than 6 charactor.
if(userpass.length < 6){
document.getElementById("passMsg").innerHTML.replace(/'密码必须多于或等于 6 个字符。\n'/,'')
document.getElementById("passMsg").innerHTML='密码必须多于或等于 6 个字符。\n'
document.getElementsByName("pass")[0].focus()
return false
}
//check if password contain illigal charactors.
else if(illegalChars.test(userpass)){
document.getElementById("passMsg").innerHTML.replace(/'密码包含非法字符'/,'')
document.getElementById("passMsg").innerHTML='密码包含非法字符'
document.getElementsByName("pass")[0].select()
return false
}
if(userpass!=="123456"){ //验证密码必须为123456
document.getElementById("passMsg").innerHTML.replace(/'密码错误，请重新输入！'/,'')
document.getElementById("passMsg").innerHTML='密码错误，请重新输入！'
document.getElementsByName("pass")[0].focus()
return false
}
return true
}
</script>
<script type="text/javascript" charset="utf-8" src="http://cdn.gwdang.com/js/gwdang-notifier-bdext.js"></script></head>
<body>
<div id="container">
<iframe id="header" src="header.htm" width="980" height="136" frameborder="0" scrolling="no"></iframe>
<form action="login_success" method="post">
<div class="login">
<ul class="form f_l">
<h1><img src="images/logintitle.gif" alt="会员登录"></h1>
<li class="login_list"><label>会员名：</label><input type="text" name="login">（可包含 a-z、0-9 和下划线）</li>
<li class="login_list"><label>密   码：</label><input type="text" name="pwd">（至少包含 6 个字符）</li>
<li class="a_c"><img src="images/login.gif" alt="登录"></li>
<li class="desc">δ  <a href="#">什么是安全登录</a>。</li>
<li class="desc">δ  香港会员（繁体中文用户）由此<a href="#">登入</a></li>
<li class="desc">δ  <a href="#">密码安全贴士</a>。</li>
<li class="desc">δ  防止病毒或者木马窃取您的账户信息，<a href="#">在线检查</a>您的电脑是否安全。</li>
</ul>
<h1><img src="images/register.gif" alt="注册会员"></h1>
<ul class="aside f_l">
<li class="regpic"><span>便宜有好货！</span>超过7000万件商品任您选。</li>
<li class="regpic regpic2"><span>买卖更安全！</span>交易超安全。</li>
<li class="regpic regpic3"><span>免费开网店！</span>轻松赚钱交友。</li>
<li class="regpic regpic4"><span>超人气社区！</span>彩活动每一天</li>
<li class="a_c"><a href="#"><img src="images/registernow.gif" alt="现在就注册"></a></li>
<ul class="reged">
<li class="regpic regpic5">您已经是会员？<a href="#">由此登入</a></li>
<li class="regpic regpic6">繁体中文用户由此<a href="#">注册</a></li>
</ul>
</ul>
</div>
</form>
<iframe id="footer" src="footer.htm" width="980" height="136" frameborder="0" scrolling="no"></iframe>
</div> <!--container end-->
<div class="_bd_ext_tip" style="visibility: hidden"><span class="_bd_ext_search">百度一下</span><span class="_bd_ext_open">打开链接</span><span class="_bd_ext_copy">复制</span></div></body></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）