web登录界面设计代码(web用户登录界面设计)
jsp登陆界面源代码
1、login.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录页面/title
/head
body
form name="loginForm" method="post" action="judgeUser.jsp"
table
tr
td用户名:input type="text" name="userName" id="userName"/td
/tr
tr
td密码:input type="password" name="password" id="password"/td
/tr
tr
tdinput type="submit" value="登录" style="background-color:pink" input
type="reset" value="重置" style="background-color:red"/td
/tr
/table
/form
/body
/html
2、judge.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title身份验证/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc") password.equals("123")) {
3、afterLogin.jsp文件
%
jsp:forward page="afterLogin.jsp"
jsp:param name="userName" value="%=name%"/
/jsp:forward
%
}
else {
%
jsp:forward page="login.jsp"/
%
}
%
/body
/html
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录成功/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%
/body
/html
扩展资料：
java web登录界面源代码：
1、Data_uil.java文件
import java.sql.*;
public class Data_uil
{
public? Connection getConnection()
{
try{
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
}catch(ClassNotFoundException e)
{
e.printStackTrace();
}
String user="***";
String password="***";
String url="jdbc:sqlserver://127.0.0.1:1433;DatabaseName=***";
Connection con=null;
try{
con=DriverManager.getConnection(url,user,password);
}catch(SQLException e)
{
e.printStackTrace();
}
return con;
}
public? String selectPassword(String username)
{
Connection connection=getConnection();
String sql="select *from login where username=?";
PreparedStatement preparedStatement=null;
ResultSet result=null;
String password=null;
try{
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,username);
result=preparedStatement.executeQuery();//可执行的? ? ?查询
if(result.next())
password=result.getString("password");
}catch(SQLException e){
e.printStackTrace();
}finally
{
close(preparedStatement);
close(result);
close(connection);
}
System.out.println("找到的数据库密码为："+password);
return password;?
}
public? void close (Connection con)
{
try{
if(con!=null)
{
con.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public? void close (PreparedStatement preparedStatement)
{
try{
if(preparedStatement!=null)
{
preparedStatement.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public? void close(ResultSet resultSet)
{
try{
if(resultSet!=null)
{
resultSet.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
}
2、login_check.jsp:文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title验证用户密码/title
/head
body
jsp:useBean id="util" class="util.Data_uil" scope="page" /
%
String username=(String)request.getParameter("username");
String password=(String)request.getParameter("password");
if(username==null||"".equals(username))
{
out.print("script language='javaScript' alert('用户名不能为空');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else
{
System.out.println("输入的用户名:"+username);
String passwordInDataBase=util.selectPassword(username);
System.out.println("密码："+passwordInDataBase);
if(passwordInDataBase==null||"".equals(passwordInDataBase))
{
out.print("script language='javaScript' alert('用户名不存在');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else if(passwordInDataBase.equals(password))
{
out.print("script language='javaScript' alert('登录成功');/script");
response.setHeader("refresh", "0;url=loginSucces.jsp");
}
else
{
out.print("script language='javaScript' alert('密码错误');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
}
%
/body
/html
3、loginSucces.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
titleInsert title here/title
/head
body
hr size="10" width="26%" align="left" color="green"
font size="6" color="red" 登录成功 /font
hr size="10" width="26%" align="left" color="green"
/body
/html
4、user_login.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
title登录界面/title
/head
body? background="C:\Users\win8\workspace\Login\image\9dcbdc339e72a5663b5c289fb5573c13_10.jpg"
center
brbrbrbrbrbr
h1 style="color:yellow"Login/h1
br
form name="loginForm" action="login_check.jsp" method="post"?
table Border="0"
tr
td账号/td
tdinput type="text" name="username"/td
/tr
tr
td密码/td
tdinput type="password" name="password"
/td
/tr
/table
br
input type="submit" value="登录" style="color:#BC8F8F"
/form
/center
/body
/html
html网页设计：一个简单的登录界面代码！
!doctype html
html
head
meta charset="utf-8"
link href="main.css" type="text/css" rel="stylesheet"
title登陆界面/title
/head
body
div class="login_ico"
img src="images/login_ico.png"
/div
div class="login_putin"
ul
liinput type="text" /li
liinput type="password" /li
/ul
/div
div class="login_btn"
input type="submit" value="登陆"
/div
/body
/html
样式 ：
*{
margin:0;
padding:0;}
li{
list-style-type:none;
margin:0;
padding:0;}
a{
text-decoration:none;
color:#000;}
/*---------------------按钮-----------------------------*/
.login_putin ul li input{
margin: 0;
width:70%;
padding: 1em 2em 1em 5.4em;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border: 1px solid #999;
}
.login_btn{
width:300px;
margin:40px auto 0 auto;
}
.login_btn input{
width:100%;
margin:0;
padding:.5em 0;
-webkit-border-radius:.3em;
-moz-border-radius: .3em;
border:#1263be solid 1px;
background:#1b85fd;
color:#FFF;
font-size:17px;
font-weight:bolder;
letter-spacing:1em;
}
.login_btn input:hover{
background:#1263be;
}
JAVA Web 编写登陆界面？
%@ page language="java" import="java.util.*" pageEncoding="GBK"%
%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%
%@ taglib prefix="s" uri="/struts-tags"%
!-- fck编辑器引入--
%@ taglib uri="/FCKeditor" prefix="FCK"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
base href="%=basePath%"
titleMy JSP 'index.jsp' starting page/title
meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="This is my page"
!--
link rel="stylesheet" type="text/css" href="styles.css"
--
script language="javascript" src="%=path%/images/js/calendar.js"
/script
script type="text/javascript"
var getNow = new Date().getYear() + '-' + new Date().getMonth() + '-'
+ new Date().getDate();!--标题验证--
function testtitle(){
var title=document.getElementsByName("t_notice.title")[0].value;
var titleSpan=document.getElementById("titleSpan");
if(title.length==0){
titleSpan.innerHTML='公告标题不能为空';
titleSpan.style.color='red';
return false;
}else if(title.length=50){
titleSpan.innerHTML='公告标题长度不能超过50';
titleSpan.style.color='red';
return false;
}else{
titleSpan.innerHTML='正确';
titleSpan.style.color='green';
return true;
}
}
!-- 有效时间--
function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2006-12-18格式 ，时间天数之差
var aDate, oDate1, oDate2, iDays ;
aDate = sDate1.split("-") ;
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) ; //转换为12-18-2006格式
aDate = sDate2.split("-") ;
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) ;
iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24) ; //把相差的毫秒数转换为天数
return iDays ;
}
function testbegindate(){//判断生效时间
var begindate=document.getElementsByName("t_notice.begindate")[0].value;
var begindateSpan=document.getElementById("begindateSpan");
var result=DateDiff(getNow,begindate)+30;
if(begindate.length==0){//生效时间未选
begindateSpan.innerHTML='生效时间不能为空';
begindateSpan.style.color='red';
return false;
}else{//生效时间有选
if(result0){//当前时间在选中的时间之后，这个生效时间可以
begindateSpan.innerHTML='生效时间不能小于当前时间';
begindateSpan.style.color='red';
return false;
}else{
begindateSpan.innerHTML='正确';
begindateSpan.style.color='green';
return true;
}
}
}
function testenddate(){//判断失效时间
var begindate=document.getElementsByName("t_notice.begindate")[0].value;
var begindateSpan=document.getElementById("begindateSpan");
var enddate=document.getElementsByName("t_notice.enddate")[0].value;
var enddateSpan=document.getElementById("enddateSpan");
if(begindate.length==0){//生效时间未选
begindateSpan.innerHTML='生效时间不能为空';
begindateSpan.style.color='red';
return false;
}else if(enddate.length==0){//失效时间未选
enddateSpan.innerHTML='失效时间不能为空';
enddateSpan.style.color='red';
return false;
}
var result=DateDiff(begindate,enddate);
if(result0){//生效时间在失效时间之后
enddateSpan.innerHTML='失效时间不能小于生效时间';
enddateSpan.style.color='red';
return false;
}else{
enddateSpan.innerHTML='正确';
enddateSpan.style.color='green';
return true;
}
}
//添加附件
var i=1;
function addMore(){
var buttonSpan=document.getElementById("buttonSpan");
if (i 3) {
buttonSpan.innerHTML='附件个数不能超过3个';
buttonSpan.style.color='red';
return false;
}
var td = document.getElementById("td");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.name = "upload";
input.contentEditable="false";
input.type = "file";
button.type = "button";
button.value = "移除该附件" + i;
button.onclick = function() {
if (confirm("确定移除该文件吗？")) {
td.removeChild(br);
td.removeChild(input);
td.removeChild(button);
i--;
}
}
td.appendChild(br);
td.appendChild(input);
td.appendChild(button);
i++;
}
//公告内容判断
function testcontext(){
//var content=document.getElementsByName("t_notice.content")[0].value;
var content=document.getElementById("t_notice.content");
var contentSpan=document.getElementById("contentSpan");
if(content.length==0){
contentSpan.innerHTML='公告内容不能为空';
contentSpan.style.color='red';
return false;
}else{
contentSpan.innerHTML='正确';
contentSpan.style.color='green';
return true;
}
}
function testall(){
if(testtitle()testbegindate()testenddate()testcontext()){
alert('验证成功！');
return true;
}else{
alert('验证失败,请按要求完善公告相关信息');
return false;
}
}
/script
s:head /
/head
body
s:form action="notice!add" namespace="/dsd" method="post"
enctype="multipart/form-data" onsubmit="return testall();"
s:hidden name="t_notice.status" value="0"/s:hidden
table width="100%" height="100%"
tr bordercolor="blue"
td align="center" background="images/top_bg.gif" colspan="2"
公告发布
/td
/tr
tr
td align="center" width="50%"
公告标题：
/td
td
s:textfield name="t_notice.title" onblur="testtitle();"/s:textfield
span id="titleSpan"/span
/td
/tr
tr
td align="center" width="50%"
生效时间：
/td
td
s:textfield name="t_notice.begindate"
onfocus="show_cele_date(this,'','',this)"
onblur="testbegindate();"/s:textfield
span id="begindateSpan"/span
/td
/tr
tr
td align="center" width="50%"
失效时间：
/td
td
s:textfield name="t_notice.enddate"
onfocus="show_cele_date(this,'','',this)" onblur="testenddate();"/s:textfield
span id="enddateSpan"/span
/td
/tr
tr
td align="center" width="50%"
上传附件：
/td
td id="td"
input type="button" value="添加附件" onclick="addMore();" /
span id="buttonSpan"/span
/td
/tr
tr
td colspan="2" align="center"
!--s:hidden name="t_notice.content"/
--
FCK:editor id="t_notice.content" width="80%" height="320"
fontNames="宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana"
imageBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Type=ImageConnector=connectors/jsp/connector"
linkBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/OA/FCKeditor/editor/filemanager/browser/default/browser.html?Type=FlashConnector=connectors/jsp/connector"
imageUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/OA/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"
/FCK:editor
span id="contentSpan"/span
/td
/tr
tr
td align="center" colspan="2"
input type="button" value="返回" onclick="javascript:window.history.back();"/
s:submit value="添加" /
s:reset value="重置" /
/td
/tr
tr
td
s:fielderror /
/td
/tr
tr
td
s:actionerror /
/td
/tr
/table
/s:form
/body
/html
类似这样的 你好好研究下下吧
求一段登录页面代码
数据库位置：data/data.mdb
数据库表：user
id name pwd wenti daan
conn.asp
%
db="data/data.mdb" '数据库存放目录
on error resume next
set conn=server.createobject("adodb.connection")
conn.open "driver={microsoft access driver (*.mdb)};dbq="server.mappath(db)
if err then
err.clear
set conn = nothing
response.write "数据库连接出错，请检查conn.asp中的连接字符串。"
response.end
end if
function closedb
conn.close
set conn=nothing
end function
%
%
dim badword
badword="'|and|select|update|chr|delete|%20from|;|insert|mid|master.|set|chr(37)|="
if request.querystring"" then
chk=split(badword,"|")
for each query_name in request.querystring
for i=0 to ubound(chk)
if instr(lcase(request.querystring(query_name)),chk(i))0 then
response.write "script language=javascriptalert('传参错误！参数 "query_name" 的值中包含非法字符串！\n\n');location='"request.servervariables("http_referer")"'/script"
response.end
end if
next
next
end if
%
reg.asp
!--＃i nclude file="conn.asp"--
%
if request("action")="reg" then
set rs=server.createobject("adodb.recordset")
rs.open "select * from user where name='"trim(request("name"))"'",conn,1,1
if rs.recordcount0 then
response.write "script language='javascript'window.alert('您输入的用户名已存在，请返回重新输入！');history.back(-1);/script"
response.end()
end if
sql="select * from user"
set rs=server.createobject("adodb.recordset")
rs.open sql,conn,1,3
rs.addnew
rs("name")=trim(request.form("name"))
rs("pwd")=trim(request.form("pwd"))
rs("wenti")=trim(request.form("wenti"))
rs("daan")=trim(request.form("daan"))
rs.update
rs.close
set rs=nothing
response.write "script language=javascript alert('注册成功，点击确定立即登录！');location.replace('login.asp');/script"
response.end
end if
%
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
td用户注册
form name="form1" method="post" action="?action=reg" onsubmit="return chkform(this)"
table width="347" border="1" cellpadding="5" cellspacing="0"
tr
td width="142"用户名/td
td width="179"input name="name" type="text" id="name"/td
/tr
tr
td密码/td
tdinput name="pwd" type="password" id="pwd"/td
/tr
tr
td密码提示问题/td
tdinput name="wenti" type="text" id="wenti"/td
/tr
tr
td密码提示答案/td
tdinput name="daan" type="text" id="daan"/td
/tr
tr
td colspan="2"input type="submit" name="submit" value="注册"
input type="reset" name="submit" value="重置" /td
/tr
/table
/form
/td
/tr
/table
/body
/html
top.asp
meta http-equiv="content-type" content="text/html; charset=gb2312"
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
tda href="/webjx/"";index.asp"首页/a
%
if session("name")="" then
%
a href="/webjx/"";reg.asp"注册/a a href="/webjx/"";login.asp"登陆/a
a href="/webjx/"";pwd.asp"忘记密码？/a %
else
%
欢迎您%=session("name")%， a href="/webjx/"";loginout.asp"注销登陆/a
%
end if
%
a href="/webjx/"";jiami.asp"加密页/a/td
/tr
/table
br
login.asp
!--＃i nclude file="conn.asp"--
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
td
用户登陆
%
if session("name")="" then
%
form name="form1" method="post" action="loginok.asp?action=login" onsubmit="return chkform(this)"
table border="1" cellspacing="0" cellpadding="5"
tr
td width="116"用户名/td
td width="116"input name="name" type="text" id="name"/td
/tr
tr
td密码/td
tdinput name="pwd" type="password" id="pwd"/td
/tr
tr
td colspan="2"input type="submit" name="submit" value="登陆"
input type="reset" name="submit" value="重置"/td
/tr
/table
/form
%
else
%
table border="1" cellspacing="0" cellpadding="5"
tr
td width="303"%=session("name")%，您已经成功登陆/td
/tr
/table
%
end if
%
/td
/tr
/table
/body
/html
loginok.asp
!--＃i nclude file="conn.asp"--
%
session.timeout=30
if request("action")="login" then
name=trim(request.form("name"))
pwd=trim(request.form("pwd"))
if name="" or pwd="" then
response.redirect ("login.asp")
end if
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"name"'and pwd='"pwd"'"
rs.open sql,conn,1,1
if not rs.eof then
session("name")=name
response.redirect"edit.asp"
else
response.redirect"error.asp"
response.end
end if
end if
%
loginout.asp
%
session("name")=""
response.write "script language=javascript alert('退出登陆成功!');location.href('index.asp');/script"
response.end
%
pwd.asp
!--＃i nclude file="conn.asp"--
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
tdp找回密码/p
form name="form1" method="post" action="pwd2.asp?action=pwd"
table width="398" border="1" cellpadding="5" cellspacing="0"
tr
td width="130"请输入用户名/td
td width="168"input name="name" type="text" id="name"/td
td width="62"input type="submit" name="submit" value="查询"/td
/tr
/table
/form/td
/tr
/table
/body
/html
pwd2.asp
!--＃i nclude file="conn.asp"--
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
td
找回密码
%
name=trim(request.form("name"))
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"name"'"
rs.open sql,conn,1,1
if not rs.eof then
%
form name="form1" method="post" action="pwd3.asp"
table width="398" border="1" cellpadding="5" cellspacing="0"
tr
td%=rs("name")%/td
td?/td
tdinput name="name" type="hidden" id="name" value="%=rs("name")%"/td
/tr
tr
td width="130"密码提示问题/td
td width="168"%=rs("wenti")%
/td
td width="62"?/td
/tr
tr
td密码提示答案/td
tdinput name="daan" type="text" id="daan"/td
tdinput type="submit" name="submit" value="查询"/td
/tr
/table
/form
% else
%
table width="413" border="1" cellpadding="5" cellspacing="0"
tr
td你输入的用户名不存在，请a href="/webjx/"";javascript:history.back()"返回/a重新输入，或者a href="/webjx/"";reg.asp"注册/a/td
/tr
/table
%end if
%
/td
/tr
/table
/body
/html
pwd3.asp
!--＃i nclude file="conn.asp"--
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
td
找回密码
%
name=trim(request.form("name"))
daan=trim(request.form("daan"))
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"name"' and daan='"daan"'"
rs.open sql,conn,1,1
if not rs.eof then
%
table width="398" border="1" cellpadding="5" cellspacing="0"
tr
td width="130"%=rs("name")%，您的密码/td
td%=rs("pwd")%
/td
/tr
/table
% else
%
table width="413" border="1" cellpadding="5" cellspacing="0"
tr
td你输入的密码提示答案不正确，请a href="/webjx/"";javascript:history.back()"返回/a重新输入/td
/tr
/table
%end if
%
/td
/tr
/table
/body
/html
error.asp
!--＃i nclude file="conn.asp"--
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
td登陆失败，请检查用户名和密码是否正确 a href="/webjx/"";login.asp"返回/a/td
/tr
/table
/body
/html
edit.asp
!--＃i nclude file="conn.asp"--
%
if request("action")="edit" then
name=session("name")
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"name"'"
rs.open sql,conn,3,2
rs("pwd")=trim(request.form("pwd"))
rs("daan")=trim(request.form("daan"))
rs.update
rs.close
set rs=nothing
response.write "script language=javascriptalert('编辑成功！');location.href('edit.asp');/script"
end if
%
html
head
meta http-equiv="content-type" content="text/html; charset=gb2312"
title无标题文档/title
/head
body!--＃i nclude file="top.asp"--
table width="90%" border="1" align="center" cellpadding="10" cellspacing="0"
tr
tdp修改资料/p
p
%
if session("name")="" then
%
对不起你还没有登陆，请a href="/webjx/"";login.asp"登陆/a或者a href="/webjx/"";reg.asp"注册/a
%
else
%
%
name=session("name")
set rs=server.createobject("adodb.recordset")
sql="select * from user where name='"name"'"
rs.open sql,conn,1,1
%
/p
form action="?action=edit" method="post" name="form" id="form"
table border="1" cellpadding="5"
tr
td用户名/td
td%=rs("name")%/td
/tr
tr
td密码/td
tdinput name="pwd" type="text" id="pwd" value="%=rs("pwd")%"/td
/tr
tr
td密码提示问题/td
td%=rs("wenti")%/td
/tr
tr
td密码提示答案/td
tdinput name="daan" type="text" id="daan" value="%=rs("daan")%"/td
/tr
tr
td?/td
tdinput type="submit" name="submit" value="修改"
input type="reset" name="submit" value="重置"/td
/tr
/table
/form
p %
end if
%
/p/td
/tr
/table
/body
/html
web前端怎么写登录页面，求个demo包括后端验证。谢谢
我写了个Demo 你可以看看
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title/title
!-- 新 Bootstrap 核心 CSS 文件 --
link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"
!-- jQuery文件。务必在bootstrap.min.js 之前引入 --
script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"/script
!-- 最新的 Bootstrap 核心 JavaScript 文件 --
script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"/script
/head
style
/style
body
p姓名：input type="text" id="tel"/p
p密码：input type="password" id="pwd"/p
p class="pl40"input type="submit" id="login" /p
/body
script
$("#login").click(
function (){
var tel=$("#tel").val();//获取页面中登录名和密码
var pwd=$("#pwd").val();
if(tel==""|| pwd==""){//判断两个均不为空（其他判断规则在其输入时已经判断）
alert("手机号密码均不能为空！")
return false;
}else{//以上均符合要求，则调用登录esb接口
$.ajax({
url:'login.json',//相对应的esb接口地址
type:'post',
data:{"mobile":tel,"password":pwd},//向服务器（接口）传递的参数
success:function(data){//服务器（接口）返回来的数据
if(data.mobile==teldata.password==pwd){//如果返回来的信息说明提交的信息为正确的
window.location.href='logon.html';//正确登录后页面跳转至
}
else{//如果返回来的信息说明提供的信息为错误的
if(tel != data.tel){//判断是用户名还是密码错误，提示相应信息
alert(data.message);
$("#tel").val("");
$("#pwd").val("");
return false;
}
if(pwd != data.pwd){
alert(data.message);
$("#pwd").val("");
return false;
}
}
}
})
}
}
);
/*直接点击enter免除手动点击登录按钮*/
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
/script
/html
json文件内容
{
"mobile":"admin",
"password":"123",
"message":"用户名或密码错误"
}
