taotao用户注册前台页面
注册页面效果：
注册jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
<title>注册-个人用户</title>
<link type="text/css" rel="stylesheet" href="/css/regist.personal.css"/>
<link type="text/css" rel="stylesheet" href="/css/passport.base.css"/>
<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
</head>
<body>
<div class="w" id="logo">
<div>
<a href="http://localhost:8082">
<img src="/images/taotao-logo.gif" alt="淘淘商城" width="170" height="60"/>
</a> <b></b>
</div>
</div> <div class="w" id="regist">
<div class="mt">
<ul class="tab">
<li class="curr">个人用户</li>
</ul>
<div class="extra">
<span>我已经注册，现在就
<a href="/user/showLogin" class="flk13">登录</a>
</span>
</div>
</div>
<div class="mc">
<form id="personRegForm" method="post" onsubmit="return false;">
<div class="form" onselectstart="return false;">
<div class="item" id="select-regName">
<span class="label"><b class="ftx04">*</b>用户名：</span> <div class="fl item-ifo">
<div class="o-intelligent-regName">
<input type="text" id="regName" name="username" class="text" tabindex="1" autoComplete="off"
onpaste="return false;"
value=""
onfocus="if(this.value=='') this.value='';this.style.color='#333'"
onblur="if(this.value=='') {this.value='';this.style.color='#999999'}"/>
<i class="i-name"></i>
<ul id="intelligent-regName" class="hide"></ul>
<label id="regName_succeed" class="blank"></label>
<label id="regName_error" class="hide"></label>
</div>
</div>
</div>
<div id="o-password">
<div class="item">
<span class="label"><b class="ftx04">*</b>请设置密码：</span> <div class="fl item-ifo">
<input type="password" id="pwd" name="password" class="text" tabindex="2"
style="ime-mode:disabled;"
onpaste="return false" autocomplete="off"/>
<i class="i-pass"></i>
<label id="pwd_succeed" class="blank"></label>
<label id="pwd_error"></label>
<span class="clr"></span>
</div>
</div> <div class="item">
<span class="label"><b class="ftx04">*</b>请确认密码：</span> <div class="fl item-ifo">
<input type="password" id="pwdRepeat" name="pwdRepeat" class="text" tabindex="3"
onpaste="return false" autocomplete="off"/>
<i class="i-pass"></i>
<label id="pwdRepeat_succeed" class="blank"></label>
<label id="pwdRepeat_error"></label>
</div>
</div>
<div class="item" id="dphone">
<span class="label"><b class="ftx04">*</b>验证手机：</span> <div class="fl item-ifo">
<input type="text" id="phone" maxlength="11" name="phone"
class="text" tabindex="4"
autocomplete="off" /> <i class="i-phone"></i> <label
id="phone_succeed" class="blank"></label> <label
id="phone_error"></label>
</div>
</div>
</div>
<div class="item item-new">
<span class="label"> </span> <div class="fl item-ifo">
<input type="checkbox" class="checkbox" checked="checked" id="readme"
onclick="agreeonProtocol();">
<label for="protocol">我已阅读并同意<a href="#" class="blue" id="protocol">《淘淘用户注册协议》</a></label>
<span class="clr"></span>
<label id="protocol_error" class="error hide">请接受服务条款</label>
</div>
</div>
<div class="item">
<span class="label"> </span>
<input type="button" class="btn-img btn-regist" id="registsubmit" value="立即注册" tabindex="8"
clstag="regist|keycount|personalreg|07"
onclick="REGISTER.reg();"/> <!-- 类似对象调用的模式 -->
</div>
</div>
<div class="phone">
<img width="180" height="180" src="/images/phone-bg.jpg">
</div>
<span class="clr"></span>
</form>
</div>
<script type="text/javascript">
//为了模拟模块化js，所以方法和变量都写成对象的形式
var REGISTER={
param:{
//单点登录系统的url（因为现在此jsp就在sso系统中，所以这里先用空字符串，否则为sso的域名）
surl:""
},
inputcheck:function(){
//不能为空检查
if ($("#regName").val() == "") {
alert("用户名不能为空");
$("#regName").focus();
return false;
}
if ($("#pwd").val() == "") {
alert("密码不能为空");
$("#pwd").focus();
return false;
}
if ($("#phone").val() == "") {
alert("手机号不能为空");
$("#phone").focus();
return false;
}
//密码检查
if ($("#pwd").val() != $("#pwdRepeat").val()) {
alert("确认密码和密码不一致，请重新输入！");
$("#pwdRepeat").select();
$("#pwdRepeat").focus();
return false;
}
return true;
},
beforeSubmit:function() {
//检查用户是否已经被占用（防止缓存，后面加上随机数）
$.ajax({
url : REGISTER.param.surl + "/user/check/"+escape($("#regName").val())+"/1?r=" + Math.random(),
success : function(data) {
if (data.data) {
//检查手机号是否存在
$.ajax({
url : REGISTER.param.surl + "/user/check/"+$("#phone").val()+"/2?r=" + Math.random(),
success : function(data) {
if (data.data) {
REGISTER.doSubmit();
} else {
alert("此手机号已经被注册！");
$("#phone").select();
}
}
});
} else {
alert("此用户名已经被占用，请选择其他用户名");
$("#regName").select();
}
}
}); },
doSubmit:function() {//序列化表单进行 post提交
$.post("/user/register",$("#personRegForm").serialize(), function(data){
if(data.status == 200){
alert('用户注册成功，请登录！');
REGISTER.login(); //跳转到登录页面
} else {
alert("注册失败！");
}
});
},
login:function() {
location.href = "/user/showLogin";
return false;
},
reg:function() {
if (this.inputcheck()) {
this.beforeSubmit();
}
}
};
</script>
</body>
</html>
taotao用户注册前台页面的更多相关文章
- MVC前台页面做登录验证
最近接触了一个电商平台的前台页面,需要做一个登录验证,具体情况是:当用户想要看自己的订单.积分等等信息,就需要用户登录之后才能查询,那么在MVC项目中我们应该怎么做这个前台的验证呢? 1.我在Cont ...
- MVC 从后台页面 取前台页面传递过来的值的几种取法
MVC 从后台页面 取前台页面传递过来的值的几种取法 <1>前台页面 Index视图 注意:用户名表单的name值为txtName 密码表单的name值为txtPassword & ...
- EF更新，数据库值变化，前台页面并不变化，刷新也不变化，重新运行程序则变化----开发中遇到的问题（已解决）
首先说一下我遇到这个情况的代码情景,首先上错误代码 UserInfo userInfo = Session["UserInfo"] as UserInfo; ); 这段代码所呈现的 ...
- ASP.NET MVC中从后台控制器（Controller）传递数据到前台页面视图（View）方式
方式一: 数据存储模型Model: public class CalendarEvent { public string id { get; set; } public DateTime start ...
- 前台页面验证中需要注意的一个与VARCHAR2(N BYTE)和VARCHAR2(N CHAR)的小细节
1:一个小的测试实例 CREATE TABLE SALES.TEST_ ( TEST_BYTE BYTE), TEST_CHAR CHAR) )--TABLE CREATED ')--1 ROW IN ...
- 前台页面Josn 数组在后台.cs代码中的解析
后台代码: //解析jObject字符串 json_wang 2015/01/27 //var passengerListStr = BookingTicket_PassengerList_Hidde ...
- 使用spring webflow，在前台页面中如何显示后端返回的错误信息
刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...
- 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...
- 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面
首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...
随机推荐
- 解决pycharm报错：AttributeError: module 'pip' has no attribute 'main'
找到pycharm安装目录下 helpers/packaging_tool.py文件,找到如下代码: def do_install(pkgs): try: import pip except Impo ...
- xampps 不能配置非安装目录虚拟主机解决方案
今天将前几天安装好的xampps配置下,准备开始php开发之旅,在我信心满满的将工作目录定在非安装目录上(安装目录在:D:\Program Files\xampps\apache\htdocs 我将 ...
- shell重温---基础篇（函数操作）
linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.shell中函数的定义格式如下: [ function ] funname [()] { action; [ret ...
- python2.7练习小例子（二十六）
26):题目:给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. 程序分析:学会分解出每一位数. 程序源代码: #!/usr/bin/python # ...
- 2 socket UDP通信
1 socket套接字 class 对象 In [1]: import socket In [2]: help(socket.socket) class socket(_socket.socket) ...
- 【原创】java 获取十个工作日之前或之后的日期（算当天）-完美解决-费元星
[原创]java 获取十个工作日之后的日期(算当天)-完美解决-费元星(仅考虑星期六星期天) /** * * 根据开始日期 ,需要的工作日天数 ,计算工作截止日期,并返回截止日期 * @param s ...
- MySQL数据库服务器逐渐变慢分析
第一步 检查系统的状态 1.1 使用sar来检查操作系统是否存在IO问题 #sar -u 2 10 — 即每隔2秒检察一次,共执行20次. [root@CacheMemCache tester]# s ...
- 浅谈 kubernetes service 那些事 （下篇）
欢迎访问网易云社区,了解更多网易技术产品运营经验. 五.K8s 1.8 新特性--ipvs ipvs与iptables的性能差异 随着服务的数量增长,IPTables 规则则会成倍增长,这样带来的问题 ...
- 云计算之路-阿里云上：受够了OCS，改用ECS+Couchbase跑缓存
当今天早上在日志中发现这样的错误之后,对阿里云OCS(mecached缓存服务)的积怨倾泻而出. 2014-06-08 07:15:56,078 [ERROR] Enyim.Caching.Memca ...
- inline-block 空隙
IE8-9.Firefox.Safari 是4px Chrome下是8px 出现原因 标签换行引起 解决方案网上很多 但是在布局中尽量避免使用inline-block