注册页面
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
BODY
{
font: 12px/20px Arial, Helvetica, "宋体" , sans-serif;
color: #000;
}
.full_percent .btnMin SPAN
{
color: #006cff;
}
.userText
{
border-bottom: #ccc 1px solid;
border-left: #ccc 1px solid;
line-height: 24px;
padding-left: 3px;
width: 40%;
height: 24px;
color: #000;
font-size: 12px;
border-top: #ccc 1px solid;
border-right: #ccc 1px solid;
padding-top: 3px;
}
.none
{
display: none !important;
}
.block
{
display: block !important;
}
.userinfo_mh
{
line-height: 22px;
min-height: 22px;
}
.ui_layout
{
position: relative;
margin: 0px auto;
width: 970px;
}
.userFormBox
{
margin: 0px auto;
width: 80%;
}
.full_percent .btnMin SPAN
{
color: #006cff;
}
.border_eb
{
border-bottom: #ebebeb 1px solid;
border-left: #ebebeb 1px solid;
display: block;
border-top: #ebebeb 1px solid;
border-right: #ebebeb 1px solid;
}
.userinfo .left_150
{
text-align: right;
display: block;
float: left;
margin-left: -150px;
_margin-left: -75px;
}
</style>
</head>
<body>
<div>
<div id="header">
<script language="javascript" type="text/javascript">
var _imgf = "<img src=\"/Images/11.png\"/>";
var _imgt = "<img src=\"/Images/12.png\"/>";
$(function () {
$("#txtCustomerID").blur(function () {
CheckCustomerID(0);
});
$("#txtCustomerEmail").blur(function () {
CheckEmail();
});
$("#txtRegisterPwd").blur(function () {
CheckPwd();
});
$("#txtRepPwd").blur(function () {
CheckRepwd();
});
$("#newtxtRegisterPwd").blur(function () {
CheckPwd();
});
$("#newtxtRepPwd").blur(function () {
CheckRepwd();
});
$("#txtcode").blur(function () {
CheckImgCode();
})
})
function postRegister_enter(event) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = event.which;
}
if (key == 13) {
return clickPostForm();
}
}
var iCount = 0;
function SubMit() {
$("#regsubmit").attr({ "disabled": "disabled" });
if (iCount == 0) {
iCount++;
setTimeout(SubMit, 1000);
} else {
document.getElementById("form1").submit();
}
}
//提交
function clickPostForm() {
if (!CheckCustomerID(1)) {
return false;
}
if (!CheckPwd()) {
return false;
}
if (!CheckRepwd()) {
return false;
}
$("#msgYanzheng").html("");
var code = $.trim($("#txtcode").val());
if (code.length != 4) {
$("#msgYanzheng").html(_imgf + "验证码长度有误");
return false;
}
//验证协议是否有效
if ($("#checkboxUserRegisterContent").attr("checked") == false) {
ShowMessage(2, "请同意协议后再点会员注册");
return false;
}
SubMit();
}
function CheckCustomerID_bak(method) {
$("#lblCustomerID").html("");
var _id = $("#txtCustomerID").val();
var _urlIDEmail = "/account/ValidateEmail";
var _urlIDPhone = "/account/ValidatePhone";
//验证用户名是否是邮箱或者手机
if (_id.length > 35 || _id.length < 1) {
$("#lblCustomerID").html(_imgf + "用户名的长度应在1-35之间");
return false;
}
var resultemail = CheckEmail(_id); //验证是否是邮箱
var resultmobil = CheckMobile(_id); //验证是否是手机
//邮箱正确
if (resultemail && !resultmobil) {
//验证邮箱是否存在
if (method == 0) {
var res;
$.ajax({
type: "post",
url: _urlIDEmail,
data: "email=" + _id,
dataType: "application/JSON; charset=utf-8",
beforeSend: function () {
$("#lblCustomerID").html("验证中.....");
},
success: function (msg) {
res = msg;
$("#txtType").val("2"); //邮箱注册
if (msg == 1) {
$("#lblCustomerID").html(_imgf + "该邮箱已经被注册");
}
else {
$("#lblCustomerID").html(_imgt);
}
},
Error: function () { $("#lblCustomerID").html("注册失败") }
});
return res == 1 ? false : true;
}
else {
$("#txtType").val("2"); //邮箱注册
return true;
}
}
//手机正确
if (resultmobil && !resultemail) {
//验证用户名是否存在
var res;
if (method == 0) {
$.ajax({
type: "post",
url: _urlIDPhone,
data: "phone=" + _id,
dataType: "application/JSON; charset=utf-8",
beforeSend: function () {
$("#lblCustomerID").html("验证中.....");
},
success: function (msg) {
res = msg;
$("#txtType").val("1"); //手机注册
if (msg == 1) {
$("#lblCustomerID").html(_imgf + "该用户名已经被注册");
}
else {
$("#lblCustomerID").html(_imgt);
}
},
Error: function () { $("#lblCustomerID").html("注册失败") }
});
return res == 1 ? false : true;
}
else {
$("#txtType").val("1"); //手机注册
return true;
}
}
//都不正确
if (!resultemail && !resultmobil) {
$("#lblCustomerID").html(_imgf + "用户名输入有误，必须是邮箱");
$("#txtType").val("");
return false;
}
}
function CheckCustomerID(method) {
$("#lblCustomerID").html("");
var _id = $("#txtCustomerID").val();
var _urlIDEmail = "/account/ValidateEmail";
//验证用户名是否是邮箱或者手机
if (_id.length > 50 || _id.length < 4) {
$("#lblCustomerID").html(_imgf + "用户名的长度应在4-50之间");
return false;
}
var mailAdd = _id;
var resultemail = CheckEmail(mailAdd); //验证是否是邮箱
//邮箱正确
if (resultemail) {
//验证邮箱是否存在
if (method == 0) {
$("#lblCustomerID").html("验证中.....");
var res;
$.ajax({
type: "post",
url: _urlIDEmail,
data: "email=" + mailAdd,
success: function (msg) {
res = msg;
$("#txtType").val("2"); //邮箱注册
if (msg == 1) {
$("#lblCustomerID").html(_imgf + "该邮箱已经被注册");
}
else {
$("#lblCustomerID").html(_imgt);
}
},
Error: function () { $("#lblCustomerID").html("注册失败") }
});
return res == 1 ? false : true;
}
else {
$("#txtType").val("2"); //邮箱注册
return true;
}
}
else {
$("#lblCustomerID").html(_imgf + "用户名输入有误，必须是邮箱");
$("#txtType").val("");
return false;
}
}
//验证邮箱是否可用
function CheckEmail(email) {
var emailPat = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (email.match(emailPat) == null) {
return false;
}
return true; //代表可以用
}
//验证手机是否可用
function CheckMobile(mobile) {
var mobilePat = /^1[358][0-9]{9}$/;
if (mobile.match(mobilePat) == null) {
return false;
}
return true; //代表可以使用
}
//验证用户名是否可用
function CheckUserName(username) {
var mobilePat = /^[A-Za-z0-9_\\-\\u4e00-\\u9fa5]+$/;
if (mobile.match(mobilePat) == null) {
return false;
}
return true; //代表可以使用
}
function CheckImgCode() {
var code = $.trim($("#txtcode").val());
$("#msgYanzheng").html("");
if (code.length != 4) {
$("#msgYanzheng").html(_imgf + "验证码输入错误");
return false;
}
}
function CheckPwd() {
$("#msgInputpassword").html("");
var pwd;
if ($("#imgShowPass").attr("checked") == true) {
pwd = $("#newtxtRegisterPwd").val();
}
else {
pwd = $("#txtRegisterPwd").val();
}
if ($.trim(pwd) == "") {
$("#msgInputpassword").html(_imgf + "密码不能为空");
return false;
}
if (pwd.length < 6 || pwd.length > 16) {
$("#msgInputpassword").html(_imgf + "密码至少6位，最多16位");
return false;
}
var mobilePat = /^[A-Za-z0-9_-]+$/;
if (pwd.match(mobilePat) == null) {
$("#msgInputpassword").html(_imgf + "6-16位字符，只能由英文、数字及“_”、“-”组成");
return false;
}
else {
$("#msgInputpassword").html(_imgt);
return true;
}
}
function CheckRepwd() {
$("#msgresetpassword").html("");
var pwd;
var repwd;
if ($("#imgShowPass").attr("checked") == true) {
pwd = $.trim($("#newtxtRegisterPwd").val());
repwd = $.trim($("#newtxtRepPwd").val());
}
else {
pwd = $.trim($("#txtRegisterPwd").val());
repwd = $.trim($("#txtRepPwd").val());
}
if (repwd == "") {
$("#msgresetpassword").html(_imgf + "请再次输入密码");
formStatus = false;
return false;
}
if (pwd != "") {
if (repwd == pwd) {
$("#msgresetpassword").html(_imgt);
formStatus = true;
return true;
}
else {
$("#msgresetpassword").html(_imgf + "两次输入的密码不一致");
formStatus = false;
return false;
}
}
}
//显示密码
function ShowZifu() {
var pass1 = $("#txtRegisterPwd").val();
var pass2 = $("#txtRepPwd").val();
if ($("#imgShowPass").attr("checked") == true) {
$("#txtRegisterPwd").addClass("none");
$("#txtRepPwd").addClass("none");
$("#newtxtRegisterPwd").removeClass("none");
$("#newtxtRepPwd").removeClass("none");
$("#newtxtRegisterPwd").val($("#txtRegisterPwd").val());
$("#newtxtRepPwd").val($("#txtRepPwd").val());
}
else {
$("#newtxtRegisterPwd").addClass("none");
$("#newtxtRepPwd").addClass("none");
$("#txtRegisterPwd").removeClass("none");
$("#txtRepPwd").removeClass("none");
$("#txtRegisterPwd").val($("#newtxtRegisterPwd").val());
$("#txtRepPwd").val($("#newtxtRepPwd").val());
}
return false;
}
String.prototype.startWith = function (s) {
var reg = new RegExp("^" + s);
return reg.test(this);
};
String.prototype.endWith = function (s) {
var reg = new RegExp(s + "$");
return reg.test(this);
};
$(document).ready(function () {
//用户鼠标移上去提示信息
$("#txtCustomerID").click(function () {
$("#lblCustomerID").html("<font color='#B5B7BC'>4-50位字符</font>");
})
$("#txtRegisterPwd").click(function () {
$("#msgInputpassword").html("<font color='#B5B7BC'>6-16位字符，可由英文、数字及“_”、“-”组成</font>");
})
$("#newtxtRegisterPwd").click(function () {
$("#msgInputpassword").html("<font color='#B5B7BC'>6-16位字符，可由英文、数字及“_”、“-”组成</font>");
})
$("#txtRepPwd").click(function () {
$("#msgresetpassword").html("<font color='#B5B7BC'>请再次输入密码</font>");
})
$("#newtxtRepPwd").click(function () {
$("#msgresetpassword").html("<font color='#B5B7BC'>请再次输入密码</font>");
})
$("#txtcode").click(function () {
$("#msgYanzheng").html("<font color='#B5B7BC'>请输入图片中的字符，不区分大小写</font>");
})
//选中查看协议
$("#lookUserRegisterContent").click(function () {
$("#UserRegisterContent").show();
$("#UserRegisterContent").removeClass("none");
})
//关闭用户注册协议
$("#CloseUserRegisterContent").click(function () {
$("#UserRegisterContent").hide();
$("#UserRegisterContent").addClass("none");
})
});
</script>
<form id="form1" onclick="" method="post">
<div id="main" class="ui_layout">
<div class="border_eb borderTop0 pb10 mt10">
<div class="allSortlistBg userTitle">
<h2>
注册新用户</h2>
</div>
<div class="userFormBox">
<ul class="userinfo mt30 pb30">
<li class="clear">
<div class="left_150 userlist_h">
<font class="arial red mr5">*</font>常用邮箱：</div>
<div class="full_percent">
<input onkeydown="return postRegister_enter(event)" id="txtCustomerID" class="userText"
maxlength="50" type="text" name="txtCustomerID">
<div style="color: red" id="lblCustomerID" class="clear mt3 userinfo_mh">
<font color="#b5b7bc">4-50位字符</font></div>
</div>
</li>
<li class="clear">
<div class="left_150 userlist_h">
<font class="arial red mr5">*</font>设置密码：</div>
<div class="full_percent">
<input onkeydown="return postRegister_enter(event)" id="txtRegisterPwd" class="userText"
onkeyup="pwStrength(this.value)" maxlength="16" type="password" name="txtRegisterPwd">
<input onkeydown="return postRegister_enter(event)" id="newtxtRegisterPwd" class="userText none"
onkeyup="pwStrength(this.value)" maxlength="16" type="text" name="newtxtRegisterPwd">
<label class="ml5 cursor">
<input id="imgShowPass" class="mr5" onclick="ShowZifu()" type="checkbox" name="checkbox">显示密码字符</label>
<div class="clear mt3 userinfo_mh">
<span style="line-height: 20px; display: none; float: left; height: 20px; color: gray;
margin-left: -10px; font-size: 12px; margin-right: 5px; _margin-left: -5px" id="pstrength_mine">
<table style="width: 190px; display: inline; vertical-align: bottom" cellspacing="1"
cellpadding="1">
<tbody>
<tr style="line-height: 15px; height: 15px" align="center" bgcolor="#f5f5f5">
<td style="text-align: right; background-color: white" width="60">
安全程度:
</td>
<td id="strength_L" width="40">
弱
</td>
<td id="strength_M" width="40">
中
</td>
<td id="strength_H" width="40">
强
</td>
</tr>
</tbody>
</table>
</span><span id="msgInputpassword" class="red"><font color="#b5b7bc">6-16位字符，可由英文、数字及“_”、“-”组成</font></span>
</div>
</div>
</li>
<li class="clear">
<div class="left_150 userlist_h">
<font class="arial red mr5">*</font>确认密码：</div>
<div class="full_percent">
<input onkeydown="return postRegister_enter(event)" id="txtRepPwd" class="userText"
maxlength="16" type="password" name="txtRepPwd">
<input onkeydown="return postRegister_enter(event)" id="newtxtRepPwd" class="userText none"
maxlength="16" type="text" name="newtxtRepPwd">
<div id="msgresetpassword" class="clear mt3 userinfo_mh red">
<font color="#b5b7bc">请再次输入密码</font>
</div>
</div>
</li>
<li class="clear">
<div class="left_150 userlist_h">
<font class="arial red mr5">*</font>输入验证码：</div>
<div class="full_percent">
<input style="width: 140px" onkeydown="return postRegister_enter(event)" id="txtcode"
class="userText" maxlength="4" type="text" name="txtcode">
<img style="width: 85px; height: 24px; margin-left: 8px; cursor: pointer" id="imgCode"
src="">
<a id="imgCodeTH" class="ml5" href="">看不清楚，换一张。</a>
<div id="msgYanzheng" class="clear mt3 userinfo_mh red">
<font color="#b5b7bc">请输入图片中的字符，不区分大小写</font></div>
</div>
</li>
<li class="clear">
<label class="ml5 cursor left mt20">
<input id="checkboxUserRegisterContent" class="mr5" type="checkbox">同意协议</label>
<a style="white-space: nowrap" id="lookUserRegisterContent" class="blue ml5 left mt20"
href="javascript:void(0)">查看协议</a> </li>
<li class="clear"><span class="login_btn2 left mt15">
<input id="regsubmit" onclick="return clickPostForm()" type="button"></span> <span
class="mt20 left"><a style="font-weight: normal" class="ml20 blue" href="#">已有账号，请登录</a></span>
</li>
</ul>
</div>
<div class="cls">
</div>
</div>
</div>
<input id="txtType" type="hidden" name="txtType">
<script type="text/javascript">
$("#imgCode").click(function () {
$("#imgCode").attr('src', '/Account/GetVryImgGen?' + Math.random());
$("#txtcode").val("");
});
$("#imgCodeTH").click(function () {
$("#imgCode").attr('src', '/Account/GetVryImgGen?' + Math.random());
$("#txtcode").val("");
});
</script>
</form>
<div style="display: none" id="UserRegisterContent" class="m_body1 nonedis">
<div class="popups_title_l">
<div class="login_ma">
用户协议</div>
<a id="CloseUserRegisterContent" class="close_pop" href="javascript:void(0);"></a>
</div>
<div class="popups_middle1">
sadadasdasdasdsadasdasdasdasdasdasdasdasdasadasdasdasdasdasdasd
</div>
<div class="popups_bottom1">
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//author:XiangzhuYang
////date:2011-11-3
//用于密码强弱判断
//判断输入密码的类型
function CharMode(iN) {
if (iN >= 48 && iN <= 57) //数字
return 1;
else if (iN >= 65 && iN <= 90) //大写
return 2;
else if (iN >= 97 && iN <= 122) //小写
return 4;
else if (iN == 45 || iN == 95) //_-
return 8;
else
return 0;
}
//bitTotal函数
//计算密码模式
function bitTotal(num) {
modes = 0;
for (i = 0; i < 6; i++) {
if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
//返回强度级别
function checkStrong(sPW) {
if (sPW.length < 6)
return 0; //密码太短
for (i = 0; i < sPW.length; i++) {
n = CharMode(sPW.charCodeAt(i));
if (n == 0) {
return 0;
}
}
Modes = 0;
for (j = 0; j < sPW.length; j++) {
//密码模式
Modes |= CharMode(sPW.charCodeAt(j));
}
return bitTotal(Modes);
}
//显示颜色
function pwStrength(pwd) {
O_color = "#eeeeee";
L_color = "#FF0000";
M_color = "#FF9900";
H_color = "#33CC00";
if (pwd == null || pwd == '') {
Lcolor = Mcolor = Hcolor = O_color;
document.getElementById("pstrength_mine").style.display = "none";
}
else {
S_level = checkStrong(pwd);
switch (S_level) {
case 0:
Lcolor = Mcolor = Hcolor = O_color;
document.getElementById("pstrength_mine").style.display = "none";
break;
case 1:
Lcolor = L_color;
Mcolor = Hcolor = O_color;
document.getElementById("pstrength_mine").style.display = "block";
break;
case 2:
Lcolor = Mcolor = M_color;
Hcolor = O_color;
document.getElementById("pstrength_mine").style.display = "block";
break;
default:
Lcolor = Mcolor = Hcolor = H_color;
document.getElementById("pstrength_mine").style.display = "block";
break;
}
}
document.getElementById("strength_L").style.background = Lcolor;
document.getElementById("strength_M").style.background = Mcolor;
document.getElementById("strength_H").style.background = Hcolor;
return;
}
</script>
