<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>USER REGISTER</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#container{
width:100%;
height:100%;
margin:auto;
background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
}
#logo{
/*border:1px solid red;*/
width:100%;
height:60px;
}
#top_left{
/*border:1px solid green;*/
width:17.939394%;
height: 58px;
float: left;
}
#top_right{
/*border:1px solid blue; */
width: 45%;
padding-top: 20px;
float:left;
}
#top_return{
width: 36.22%;
/* padding-top: 20px; */
float: left;
}
.c7c7ca_color{
color: #FFF;
font-family: Century Gothic;
font-size: 24px;
}
ul li{
display: inline;
}
#green_bar{
width:100%;
height:34.2px;
background-color: #15a2b3;
}
#user_registration{
/*border:1px solid red;*/
height: 95px;
}
#user_registration_left{
/*border:1px solid green;*/
width: 30.0%;
height: 78px;
float:left;
}
#user_registration_right{
/*border:1px solid blue;*/
width:69.78%;
padding-top: 59;
height:36px;
color: #15a2b3;
font-size: 25px;
font-family: Century Gothic;
float:left;
}
#addUser,#sendCheckCode{
color: #686969;
font-size: 14px;
font-family: Century Gothic;
/*background-color: #eee;*/
}
#ur_font_padding{
padding-top: 56px;
height:22px;
}
#first_hr{
/*border:1px solid red;*/
height:25px;
}
#ur_table{
font-size: 12px;
font-family: Century Gothic;
color: #686969;
}
input{
width:220px;
height:22px;
}
#bottom {
width: 100%;
height: 281px;
}
a{
text-decoration:none;
}
#return_to_homepage{
color:#5d5b5d;
}
</style>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function checkForm(){
//alert("aa");
//校验用户名
// 1.获取用户输入的数据
var uValue = document.getElementById("userName").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
/* alert("username cannot be empty!"); */
$.messager.alert('Messager','username cannot be empty!','info');
return false;
}
// 2.校验密码
var pValue = document.getElementById("userPassword").value;
if(pValue==""){
/* alert("password cannot be empty"); */
$.messager.alert('Messager','password cannot be empty!','info');
return false;
}
// 3.校验确认密码
var rpValue = document.getElementById("confirmpwd").value;
if(rpValue != pValue){
/* alert("two passwords are inconsistent"); */
$.messager.alert('Messager','two passwords are inconsistent!','info');
return false;
}
// 4.校验邮箱
var eValue = document.getElementById("userMailAddress").value;
if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(eValue)){
/* alert("Incorrect email format!"); */
$.messager.alert('Messager','Incorrect email format!','info');
return false;
}
// 5.校验手机号码
var userPhoneNumber = document.getElementById("userPhoneNumber").value;
if(userPhoneNumber==""){
/* alert("phone number cannot be empty"); */
$.messager.alert('Messager','phone number cannot be empty!','info');
return false;
}
return true;
}
function showTips(id,info){
document.getElementById(id+"span").innerHTML = "<font style='color:gray'>"+ info +"！</font>";
}
function check(id,info){
// 1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
// 2.进行校验
if(uValue==""){
document.getElementById(id + "span").innerHTML = "<font style='color:red'>"+ info +"！</font>";
}else{
document.getElementById(id + "span").innerHTML = "";
}
}
function checkRePassword(id,info){
var pValue = document.getElementById("userPassword").value;
var rpValue = document.getElementById("confirmpwd").value;
if(rpValue != pValue){
document.getElementById(id + "span").innerHTML = "<font style='color:red'>"+ info +"！</font>";
}else{
document.getElementById(id + "span").innerHTML = "";
}
}
function checkEmail(id,info){
var eValue = document.getElementById(id).value;
if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(eValue)){
document.getElementById(id + "span").innerHTML = "<font style='color:red'>"+ info +"！</font>";
}else{
document.getElementById(id + "span").innerHTML = "";
}
}
//注册
function registerUser() {
var flag = false;
flag = checkForm();
if(flag){
$.post("<%=basePath%>user/addUser.action",$("#register_user_form").serialize(),function(data){
/* alert(data.message); */
$.messager.alert('Messager',data.message,'info');
});
}
}
</script>
<script>
$(function(){
// 发送邮箱验证码
$("#sendCheckCode").click(function(){
// 邮箱验证发送的随机数
var checkCode = "";
for(var i=0;i<6;i++) {
checkCode+=Math.floor(Math.random()*10);
}
// 将随机数放到某一处地方，方便下面取用作比较，因为不能设置为全局变量
$("#hideCheckCode").val(checkCode);
//发送验证码倒计时
var code = $("#sendCheckCode");
code.attr("disabled","disabled");
setTimeout(function(){
code.css("opacity","0.8");
},1000);
var time = 60;
var set = setInterval(function(){
--time;
// code.text("("+time+")秒后重新获取");
// Reacquire after 5 seconds
code.text("Reacquire after "+time+" seconds");
}, 1000);
setTimeout(function(){
code.attr("disabled",false).text("Retrieve the CheckCode");
clearInterval(set);
}, 60000);
// 获取邮箱
var userMailAddress = $("#userMailAddress").val();
//alert(userMailAddress);
if(userMailAddress==""||!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(userMailAddress)){
alert("Please fill in the correct email address");
}else{
var params = {"userMailAddress":userMailAddress,"checkCode":checkCode};
console.log('params',params);
$.ajax({
type:"POST",
url:"<%=basePath%>/sendCheckCode.action",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(params),
success:function(data){
console.log(data);
$.messager.alert('Messager',data.message,'info');
}
});
}
});
$("#addUser").click(function(){
//注册用户
var flag = false;
flag = checkForm();
if(flag){
// 获取userName值
var userName = $("#userName").val();
console.log("userName",userName);
if(userName==undefined||userName==null||userName.trim()==""){
$.messager.alert('Messager','The userName cannot be empty!','info');
return;
}
// 获取userPassword值
var userPassword = $("#userPassword").val();
console.log("userPassword",userPassword);
if(userPassword==undefined||userPassword==null||userPassword.trim()==""){
$.messager.alert('Messager','The password cannot be empty!','info');
return;
}
// 获取userMailAddress值
var userMailAddress = $("#userMailAddress").val();
console.log("userMailAddress",userMailAddress);
if(userMailAddress==undefined||userPassword==null||userMailAddress.trim()==""){
$.messager.alert('Messager','The email cannot be empty!','info');
return;
}
// 获取userPhoneNumber值
var userPhoneNumber = $("#userPhoneNumber").val();
console.log("userPhoneNumber",userPhoneNumber);
if(userPhoneNumber==undefined||userPhoneNumber==null||userPhoneNumber.trim()==""){
$.messager.alert('Messager','The phone number cannot be empty!','info');
return;
}
// 获取checkCode值
var checkCode = $("#checkCode").val();
console.log("checkCode",checkCode);
if(checkCode==undefined||checkCode==null||checkCode.trim()==""){
$.messager.alert('Messager','The checkCode cannot be empty!','info');
return;
}else{
// 获取隐藏的checkCode值
var hideCheckCode = $("#hideCheckCode").val();
console.log("hideCheckCode",hideCheckCode);
if(checkCode==hideCheckCode){
var params = {
"userName":userName,
"userPassword":userPassword,
"userMailAddress":userMailAddress,
"userPhoneNumber":userPhoneNumber
};
$.ajax({
type:"POST",
url:"<%=basePath%>/addUserInfo.action",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(params),
success:function(data){
// console.log(data);
console.log(data.message);
$.messager.alert('Messager',data.message,'info');
}
});
}else{
$.messager.alert('Messager','The checkcode is invalid!','info');
}
}
}
});
});
</script>
</head>
<body>
<div id="container">
<!-- 1.logo部分 -->
<div id="logo">
<div id="top_left">
</div>
<div id="top_right">
<font color="#1c6299" size="6" face="Helvetica"><b>Az</b></font><font color="#15a2b3" size="6" face="Helvetica"><b>tech</b></font>
<%-- <font color="#5d5b5d" size="5" face="Century Gothic"><a id="return_to_homepage" href="${pageContext.request.contextPath}/user/loginUser.action">Smart Lighting Management System</a></font> --%>
<font color="#5d5b5d" size="5" face="Century Gothic"><a id="return_to_homepage" href="${pageContext.request.contextPath}/community/communityList.action">Smart Lighting Management System</a></font>
</div>
<%-- <div id="top_return" class="c7c7ca_color">
<ul>
<li ><a href="${pageContext.request.contextPath}/user/loginUser.action">homepage</a></li>
</ul>
</div> --%>
</div>
<!-- 2.green bar部分 -->
<div id="green_bar">
</div>
<!-- 3.Add User部分 -->
<div id="user_registration">
<div id="user_registration_left">
</div>
<div id="user_registration_right">
<div id="ur_font_padding">
Add User
</div>
</div>
</div>
<!-- 4.first hr部分 -->
<div id="first_hr">
<hr align="center" width="800px" color="#b5b7b9">
</div>
<!-- 5.表单部分 -->
<div id="ur_table">
<form id="register_user_form">
<table border="0" width="600px" height="400px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="80px" >
<label for="userName"><span style="color:green;">*</span> Name</label>
</td>
<td width="255px" >
<input type="text" id="userName" name="userName" onfocus="showTips('userName','Username must be required')"
onblur="check('userName','username cannot be empty')" placeholder="please input username" > <span id="userNamespan"></span>
</td>
</tr>
<tr>
<td width="80">
<label for="userPassword"><span style="color:green;">*</span> Current Password</label>
</td>
<td width="255">
<input type="password" id="userPassword" name="userPassword" onfocus="showTips('userPassword','Password must be required')" onblur="check('userPassword','password cannot be empty')" placeholder="please input password"> <span id="userPasswordspan"></span>
</td>
</tr>
<tr>
<td width="80">
<label for="confirmpwd"><span style="color:green;">*</span> Confirm Password</label>
</td>
<td width="255">
<input type="password" id="confirmpwd" name="confirmpwd" onfocus="showTips('confirmpwd','Confirm password must be required')" onblur="checkRePassword('confirmpwd','two passwords are inconsistent')" placeholder="please input confirmpassword"> <span id="confirmpwdspan"></span>
</td>
</tr>
<tr>
<td width="80">
<label for="userMailAddress"><span style="color:green;">*</span> E-Mail</label>
</td>
<td width="255">
<input type="text" id="userMailAddress" name="userMailAddress" onfocus="showTips('userMailAddress','Email must be required')" onblur="checkEmail('userMailAddress','Incorrect email format')" placeholder="please input Email"> <span id="userMailAddressspan"></span>
</td>
</tr>
<tr>
<td width="80">
<label for="userPhoneNumber"><span style="color:green;">*</span> PhoneNumber</label>
</td>
<td width="255">
<input type="text" id="userPhoneNumber" name="userPhoneNumber" onfocus="showTips('userPhoneNumber','phone number must be required')" onblur="check('userPhoneNumber','phone number cannot be empty')" placeholder="please input phonenumber"> <span id="userPhoneNumberspan"></span>
</td>
</tr>
<tr>
<td width="80">
<label for="checkCode"><span style="color:green;">*</span> checkCode</label>
</td>
<td width="400">
<input type="text" id="checkCode" name="checkCode" placeholder="please input checkCode">
<input type="hidden" id="hideCheckCode" >
<button type="button" id="sendCheckCode" >Send CheckCode</button>
</td>
<!-- <td width="145">
</td> -->
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id="addUser" >Add User</button>
</td>
</tr>
</table>
</form>
</div>
<!-- 6.second hr部分 -->
<div id="second_hr">
<hr width="800px" align="center" color="#b5b7b9">
</div>
<!-- 7.bottom空白部分 -->
<div id="bottom">
</div>
</div>
</body>
</html>
添加用户并使用邮件发送验证码
猜你喜欢
转载自blog.csdn.net/Leon_Jinhai_Sun/article/details/87461972
今日推荐
周排行