新模版实现登录注册

1.在注册页面输入用户名,密码,邮箱时,调用相应的ajax方法,查询用户名,邮箱是否存在,密码是否相同,并返回结果给注册页面,使用span标签进行结果显示.
结果由service返回给controller再返回给ajax.

检查用户名的service方法

public Map checkUsername(String username) {
		Map rs=new HashMap();
		User u=urepository.findByUsername(username);
		if(u!=null) {
			rs.put("rs1", "用户名已存在!");
		}else {
			rs.put("rs1", "用户名可以使用");
		}
		return rs;
	}

对应的jquery代码

 function checkUsername(){
		$("#setusername").keyup(function(){
			var username=$("#setusername").val();
			$.get("/spring2/checkusername", { username: username},
					function(data){
						if(username==""){
							$("#usermessage1").html("");
						}else{
							$("#usermessage1").html(data.rs1);
						}	
			});
		});
	}

检查邮箱的方法与用户名相同.

检查密码是否相同的方法在前端进行.

function checkPwd(){
		$("#setpwd,#setpwd2").keyup(function(){
			var pwd=$("#setpwd").val();
			var pwd2=$("#setpwd2").val();
			if(pwd!=pwd2&&pwd!=""&&pwd2!=""){
				$("#usermessage3").html("两次密码不一致");
			}else if(pwd==pwd2){
				$("#usermessage3").html("");
			}
		});
	}

2.在点击注册按钮时,会首先获取显示在前端页面的提示信息是否满足条件,若满足条件则运行提交方法registerSubmit(). 在该方法中首先触发form的submit()方法,判断输入框中的required(即是否为空),以及email格式是否正确,若正确则使用ajax提交注册信息,并跳转到登录页面.(在HTML代码中form添加了onsubmit=“return false;”,所以form不会进行提交,只是因为想要使用判断是否为空而保留form,提交由前端完成.

function checkAllAndRegister(){
		$("#regbtn").click(function(){
			var str1=$("#usermessage1").text();
			var str2=$("#usermessage2").text();
			var str3=$("#usermessage3").text();
			var rs=(str1=="用户名可以使用"&&str2==""&&str3=="");
			if(rs){
				registerSubmit();
			}else{
				return false;
			}
		});
	}
	
	function registerSubmit(){
		$("#registerform").submit(
				function(){
					var username=$("#setusername").val();
					var email=$("#setemail").val();
					var password=$("#setpwd").val();
					$.get("/spring2/register", { username: username, email :email, password: password } );
					window.location.href="/spring2/admin/pages-login.html";
				});
	}

3.演示





4.注册js方法完整代码

/**
 * 1.用户名,邮箱,密码单独检查均用keyup()方法检查
 * 2.检查完成后在前端显示结果
 * 3.点击注册按钮时,运行checkAllAndRegister()获得显示在前端的结果,只有在满足注册条件时才运行registerSubmit()
 * 4.registerSubmit()在前端检查输入是否有空以及email格式是否正确,并进行提交
 * @returns
 */
$(document).ready(function(){
	checkUsername();//检查用户名是否存在,并在HTML中显示
	checkEmail();//检查邮箱地址是否已注册,并在HTML中显示
	checkPwd();//检查两次密码是否相同,并在HTML中显示
	checkAllAndRegister();//获取所有检查结果,若满足注册条件,则运行提交,完成注册
	
	function checkAllAndRegister(){
		$("#regbtn").click(function(){
			var str1=$("#usermessage1").text();
			var str2=$("#usermessage2").text();
			var str3=$("#usermessage3").text();
			var rs=(str1=="用户名可以使用"&&str2==""&&str3=="");
			if(rs){
				registerSubmit();
			}else{
				return false;
			}
		});
	}
	
	function registerSubmit(){
		$("#registerform").submit(
				function(){
					var username=$("#setusername").val();
					var email=$("#setemail").val();
					var password=$("#setpwd").val();
					$.get("/spring2/register", { username: username, email :email, password: password } );
					window.location.href="/spring2/admin/pages-login.html";
				});
	}
	
	function checkUsername(){
		$("#setusername").keyup(function(){
			var username=$("#setusername").val();
			$.get("/spring2/checkusername", { username: username},
					function(data){
						if(username==""){
							$("#usermessage1").html("");
						}else{
							$("#usermessage1").html(data.rs1);
						}	
			});
		});
	}
	
	function checkEmail(){
		$("#setemail").keyup(function(){
			var email=$("#setemail").val();
			$.get("/spring2/checkemail", { email: email},
					function(data){
						if(email==""){
							$("#usermessage2").html("");
						}else{
							$("#usermessage2").html(data.rs1);
						}	
			});
		});
	}
	
	function checkPwd(){
		$("#setpwd,#setpwd2").keyup(function(){
			var pwd=$("#setpwd").val();
			var pwd2=$("#setpwd2").val();
			if(pwd!=pwd2&&pwd!=""&&pwd2!=""){
				$("#usermessage3").html("两次密码不一致");
			}else if(pwd==pwd2){
				$("#usermessage3").html("");
			}
		});
	}
	
});