xml地图|网站地图|网站标签 [设为首页] [加入收藏]

皇家娱乐场thickbox仿校内登录注册框,异步上传图

来源:http://www.ccidsi.com 作者:集成经验 人气:117 发布时间:2019-09-19
摘要:下边将本身用thickbox和css完成校内登入(注册)框与我们大快朵颐下-----》效果图如下: 措施很简短,正是用thickbox的iframe方式,将另一个页面嵌套就能够,然后在那些页面里写ajax来完

下边将本身用thickbox和css完成校内登入(注册)框与我们大快朵颐下-----》效果图如下:
皇家娱乐场 1
皇家娱乐场 2
皇家娱乐场 3
措施很简短,正是用thickbox的iframe方式,将另一个页面嵌套就能够,然后在那些页面里写ajax来完结相应的职能。
代码:
注册:regUser.html

(jsp要求引进 :jquery-1.9.0.js、jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单一模二样。代码相比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含!
(参谋文献:)
一:web (add.jsp)

复制代码 代码如下:

复制代码 代码如下:

<link type="text/css" href="css/reg.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$().ready(function () {
var validate = true;
//检查客户名是或不是可用
$('#userid').blur(function () {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=check",
data: "userid=" escape($('#userid').val()),
success: function (msg) {
if (msg == "success") {
//通过认证
validate = true;
$('#username').css("display", "none");
}
if (msg == "fail") {
validate = false; //没有经过认证
//alert("客商名重名!");
$('#username').css("display", "inline");
}
}
});
});
$('#createUser').click(function () {
if ($('#userid').val() == "") {
validate = false;
alert("客户名不能够为空!");
return;
}
if ($('#userpwd').val() == "") {
validate = false;
alert("密码无法为空!");
return;
}
if ($('#email').val() == "") {
validate = false;
alert("Email不能够为空!");
return;
}
if (!isEmail($('#email').val())) {
validate = false;
alert("Email格式不科学!");
return;
}
if (validate) {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=reg",
data: "userid=" escape($('#userid').val()) "&userpwd=" escape($('#userpwd').val()) "&email=" escape($('#email').val()),
success: function (msg) {
if (msg == "success") {
alert("注册成功");
}
if (msg == "fail") {
alert("注册失利!");
}
}
});
}
});
});
function isEmail(str) {
var reg = /^([a-zA-Z0-9_-]) @([a-zA-Z0-9_-]) ((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}
</script>
<div class="box" style="width:280px ; height:230px;">
<h1>
注册</h1>
<p>
新客户?登时注册</p>
<form action="" method="post">
<label>
<span>用户名</span>
<input type="text" id="userid" class="input-text" />
<b id="username" style="display:none; color:Red; display:none">不可用</b>
</label>
<label>
<span>E-mail</span>
<input type="text" id="email" class="input-text" />
</label>
<label>
<span>密码</span>
<input type="password" id="userpwd" class="input-text" />
</label>
</form>
<div class="spacer">
<a href="#" id="createUser" class="green">创造新的账号</a></div>
<div class="spacer">
早已登记过,重回登陆 <a href="#" onclick="parent.tb_remove()">重返登入</a>
</div>
</div>

<%@page import="com.fingerknow.project.vo.UserInformation"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!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>
<link href="${ctx}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${ctx}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${ctx}/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/css/uniform.css" />
<link rel="stylesheet" href="${ctx}/css/select2.css" />
<link rel="stylesheet" href="${ctx}/css/unicorn.main.css" />
<link rel="stylesheet" href="${ctx}/css/common.css" />
<%
response.setCharacterEncoding("utf-8");//这一个是安装编码情势
response.setContentType("text/html");//那几个是设置网页类型,为文本代码
UserInformation user=null;
String username="";
Integer userId=null;
if(request.getSession().getAttribute("userinfo")!=null){
user=(UserInformation)request.getSession().getAttribute("userinfo");
username=user.getUsername();
userId=user.getUserId();
}else{
username="请<a href=';";
}
%>
</head>
<body>
<div class="header-inner">
<div class="container">
<div class="row">
<div class=" page-header clearfix">
<div class="span11"> <h1 class="page-header" style="background:black;"><img alt="fingerknow" src="${ctx}/images/fingerknow.png" width=""><small>汉语最大的购物经验分享平台</small></h1> </div>
<div class="span1"> <a href="#">首页</a> |<a href="#">帮助</a></div>
</div>
</div>
</div>
</div>
<div class="container" id="businessEname_div">
<div class="row">
<div class="span1"></div>
<div class="span10">
<div class="widget-box">
<div class="widget-title">
<span class="icon">
<i class="icon-align-justify"></i>
</span>
<h5>注册商圈</h5>
</div>

客户登陆:

<div class="widget-content nopadding">
<form class="form-horizontal" method="post" action="${ctx}/upload/upload.do" id="uploadImgForm" enctype="multipart/form-data">
<div class="control-group" style="border: 0px solid red;">
<label class="control-label">*商圈名:</label>
<div class="controls" style="width: 350px;border: 0px solid red;vertical-align: middle;" >
<input type="text" name="businessName" maxlength="20" id="businessName" width="200px;"/>
<input type="text" name="userId" maxlength="20" value="<%=userId%>" id="userId" width="200px;"/>
<div id="businessName_error" ></div>
</div>

复制代码 代码如下:

</div>
<div class="control-group">
<label class="control-label">*商圈logo:</label>
<div class="controls" style="width:350px;">
<input type="file" name="file" id="file">
<div id="file_error"></div>
</div>
</div>
<div class="control-group">
<label class="control-label">*商圈土耳其语名:</label>
<div class="controls" style="width: 350px;">
<input type="text" name="businessEname" id="businessEname" />
<div id="businessEname_error"></div>
</div>
</div>
<div class="form-actions">
<button type="button" id="imgSave" value="Validate" class="btn btn-primary">提交注册</button>
</div>
</form>
</div>
</div>
</div>
<div class="span1"></div>
</div>
</div>
<div class="container" style="background:white;">
<div class="row">
<div class="span12" style="margin-left: 25%;">
<p>© 2012 fingerknow.com <span>|</span><a href="#" rel="nofollow" >隐秘条文</a><span>|</span><a href="#" rel="nofollow">服务条约</a><span>|</span><a href="#" rel="nofollow" >粤ICP备12003619号-1</a></p>
</div>
</div>
</div>
<script src="${ctx}/js/jquery-1.9.0.js"></script>
<script src="${ctx}/js/jquery.form.js"></script>
<script type="text/javascript">
/**
*
* V1.0
*/
$(document).ready(function() {

<link type="text/css" rel="Stylesheet" href="css/login.css" />
<link type="text/css" rel="Stylesheet" href="css/thickbox.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript">
$().ready(function () {
//使用ajax举办客户登入,假如登入成功则写入session
$('#userLogin').click(function () {
if ($('#userid').val() == "" || $('#userpwd').val() == "") {
alert("顾客名或密码不能为空!");
}
else {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=login",
data: "userid=" escape($('#userid').val()) "&userpwd=" escape($('#userpwd').val()),
success: function (msg) {
if (msg == "success") {
//alert('登入成功');
//document.location.href = "Default.aspx";
$('#divLogin').css("display", "none");
var welcome = "欢迎" $('#userid').val() ",<a href='Ajax/CommonAjax.aspx?action=logout'>退出</a>";
$('#tempInfo').css("display", "block");
$('#tempInfo').html(welcome);
}
if (msg == "fail") {
alert("登陆战败!");
}
}
});
}
});
});
</script>
<!--登入区域-->
<%if (Session["User"] == null)
{ %>
<div class="box" id="divLogin">
<h1>
登 录</h1>
<form action="" method="post">
<label>
<span>账号</span>
<input type="text" name="email" id="userid" style="height: 20px; font-size: 16px;
width: 120px" class="input-text" />
</label>
<label>
<span>密码</span>
<input type="password" name="psw" id="userpwd" style="height: 20px; font-size: 16px;
width: 120px" class="input-text" />
</label>
</form>
<div class="spacer">
<a href="javascript:;" id="userLogin" class="green" style="background: #67a54b; color: #FFFFFF;
text-decoration: none">  登  录  </a></div>
<div class="spacer">
记不清密码? <a href="FindPwd.htm?KeepThis=true&TB_iframe=true&height=250&width=300&modal=true"
class="thickbox" style="color: #0033CC; background: #dfe4ee;">找回密码</a><br />
还不曾挂号? <a href="UserReg.htm?KeepThis=true&TB_iframe=true&height=250&width=350&modal=true"
style="color: #0033CC; background: #dfe4ee;" class="thickbox">注册</a>
</div>
</div>
<%}
else
{ %>
<div id="divUserInfo" style=" height:80px;">
欢迎, <%=Session["User"].ToString() %>,<a href="Ajax/CommonAjax.aspx?action=logout">退出</a>
</div>
<%} %>
<div id="tempInfo" style="height:80px; display:none">
</div>

//验证商圈名
$("#businessName").blur(function(){
var businessName=$("#businessName").val();
if(businessName!=""){
$("#businessName_error").html("<img src='${ctx}/images/success_img.gif' style='width:15px;height:15px;'/>");
}else{
$("#businessName_error").attr("class","error_div").html("<img src='${ctx}/images/error_img2.gif' style='width:15px;height:15px;'/>" "商圈名不能够为空!");
}

本文由68399皇家赌场发布于集成经验,转载请注明出处:皇家娱乐场thickbox仿校内登录注册框,异步上传图

关键词: 68399皇家赌场

最火资讯