<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--引入校验工具 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
body {
margin: 0 auto;
margin-top: 150px;
background-image: url("image/regist_bg.jpg");
}
.carousel-inner .item img {
width: 100%;
height: 300px;
}
font {
color: #3164af;
font-size: 18px;
font-weight: normal;
padding: 0 10px;
}
</style>
<script type="text/javascript">
/*
$(function(){
$("#registform").validate({
rules:{
"username":{"required":true
},
"password":{
"required":true,
"rangelength":[6,10]
},
"confirm_password":{
"required":true,
"equalTo":"#password"
},
"email":{
"required": true,
"email":true
},
"name":{
"required": true,
}
},
messages:{
"username":{
"required":"请填写用户名"
},
"password":{
"required":"请填写密码",
"rangelength":"密码长度应为6-12位"
},
"confirm_password":{
"required":"请填写密码",
"equalTo":"两次密码输入不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"请输入正确的邮箱格式"
},
"name":{
"required": "姓名不能为空"
}
}
});
}); */
</script>
<script type="text/javascript">
//根据id获取节点
function $(id) {
return document.getElementById(id);
}
//根据id获取节点的值
function $V(id) {
return $(id).value;
}
//获取ajax对象
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp')
}
return xhr;
}
//获取lable元素,将错误信息设置给lable对象
//检验用户名不能为空且不能重复
function checkUserName(){
var username=$("username");
var uname=$V("username");
if(uname.length == 0){
$("msg").innerHTML='用户名不能为空';
}else{
$("msg").innerHTML='';
//使用AJAX,验证用户名是否存在;
var xhr=getXhr();
xhr.open('get','${pageContext.request.contextPath}/checkUsername?uname='+ uname,true);
xhr.send();
xhr.onreadystatechange=function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var value = xhr.responseText;
$("msg").innerHTML=value;
}
}
}
}
//校验密码不能为空,且开头是大写字母;
function checkPwd(){
var pwd=$V("password");
console.log(pwd);
var reg=/^[A-Z]+[a-z0-9]+$/;
$("msg").innerHTML='';
if(! reg.test(pwd)){
$("msg").innerHTML="以大写字母开头,由字母和数字组成";
}
if (pwd.length < 6 || pwd.length > 12){
$("msg").innerHTML="密码长度为应6-12位";
}
if(pwd.length==0){
$("msg").innerHTML="密码不能为空";
}
}
//验证确认密码
function valitadePwd(){
//获取元素中的值
var pwd1 = $V("password");
var pwd2 = $V("confirm_password");
console.log(pwd2);
if(pwd2 != pwd1){
$("msg").innerHTML="两次密码输入不一致";
}else{
$("msg").innerHTML="";
}
if(pwd2.length==0){
$("msg").innerHTML="密码不能为空";
}
}
//验证emial
function validateEmail(){
var vemail=$V("inputEmail");
var reg=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
if (!reg.test(vemail)) {
$("msg").innerHTML="请输入正确的邮箱格式";
}else{
$("msg").innerHTML="";
}
}
//验证姓名
function validateName(){
var name=$V("usercaption");
var reg=/^([\u4e00-\u9fa5]){2,10}$/; //只能是中文,长度为2-7位
if (!reg.test(name)) {
$("msg").innerHTML="请输入中文姓名长度为2-10位";
}else{
$("msg").innerHTML="";
}
}
//验证手机号
function validatTel(){
var tel=$V("telephone");
var reg= /^[1][3,4,5,7,8][0-9]{9}$/;
if (!reg.test(tel)) {
$("msg").innerHTML="请输入合法的手机号";
}else{
$("msg").innerHTML="";
}
}
//更新验证码
function changeCode() {
document.getElementById("myCode").src = "${pageContext.request.contextPath}/bulideCode?code="+ new Date().getSeconds();
}
//检查验证码输入是否正确;
function checkCode() {
//获取ajax对象
var xhr = getXhr();
//获取验证码输入框中的值
var vCode = $V("validateCode");
//获取提交按钮元素
//创建连接;将值传入到后端;
xhr.open('get', '${pageContext.request.contextPath}/checkCode?vCode='+ vCode, true);
//发送请求
xhr.send();
//判断xhr对象的状态改变情况
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//获取响应回的数据
var value = xhr.responseText;
//验证成功,将提交按钮设置为可用
if ("验证成功" == value) {
$("msg").innerHTML="";
$("commitForm").disabled = false;
}else{
//获取lable元素,并且将信息设置给lable对象
$("msg").innerHTML=value;
}
}
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6"
style="background: #fff; padding: 40px 20px; border: 6px solid #ccc;">
<div class="col-sm-3"></div>
<div class="col-sm-7"><font>用户注册</font>USER REGISTER<hr/></div>
<form id="registform" class="form-horizontal" style="margin-top:10px;" method="post" action="${pageContext.request.contextPath}/register">
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<label id="msg" style="color:red ;"></label>
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" onblur="checkUserName()"
placeholder="请输入用户名">
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" name="password" onblur=" checkPwd()"
placeholder="大写字母开头,长度为6-12位">
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="confirmpwd" class="col-sm-3 control-label">确认密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirm_password" name="confirm_password" onblur=" valitadePwd()"
placeholder="请输入确认密码">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail" name="email" onblur="validateEmail()"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="usercaption" class="col-sm-3 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="usercaption" name="name" onblur="validateName()"
placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">联系方式</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="telephone" name="telephone" onblur="validatTel()"
placeholder="请输入你的联系方式">
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="validateCode" name="code" onblur="checkCode()">
</div>
<div class="col-sm-3">
<img id="myCode" src="${pageContext.request.contextPath}/bulideCode" title="看不清,换一张" style="cursor: pointer;" onclick=" changeCode()" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class=" col-sm-9">
<input type="submit" id="commitForm" width="100" value="注册" name="submit" disabled="disabled"
style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>