Springboot前后端分离实现注册

1.使用之前写过的判断用户名密码的js方法.
2.注册按钮使用a标签(#regbtn),当点击注册按钮时,在js中判断是否满足注册条件,若满足则将信息存入数据库并跳转到登录页面,否则点击无效.

//register.js
$(document).ready(function(){
	$("#setuname,#setpwd,#setpwd2").keyup(function(){
	//获取用户名及两次输入的密码
		var username=$("#setuname").val();
		var pwd=$("#setpwd").val();
		var pwd2=$("#setpwd2").val();
		var s="";
		var s2="";
		$.get("/spring/check", { username: username},//check方法检查用户名是否合法
			function(data){
				$("#str1").html(data.str1);//显示在用户名框后
				if(data.str1=="用户名已存在"||data.str1=="用户名长度超出范围"||data.str1=="用户名长度太短"
						||data.str1=="用户名不能为空"){
					$('#setpwd,#setpwd2').attr("disabled",true);
				}else{
					$('#setpwd,#setpwd2').attr("disabled",false);
					if(pwd!=""&&pwd2!=""){
						if(pwd.length<6){
							s="密码长度太短";
							$('#setpwd2').attr("disabled",true);
						}else{
							$('#setpwd2').attr("disabled",false);
							if(pwd!=pwd2){
								s="两次密码不相同";
							}else if(pwd==pwd2){
								s2="ready!"
								$('#setpwd2').attr("disabled",false);
							}
						}
					}
					
				}
				$("#str2").html(s);//显示在密码框1后
				$("#str3").html(s2);//显示在密码框2后
			});
	});
  $("#regbtn").click(
	function(){
		var s=$("#str3").text();//获取上一个js方法输出的文本(当且仅当为ready!时满足注册条件)
		if(s=="ready!"){
			var username=$("#setuname").val();
			var pwd=$("#setpwd").val();
			$.get("/spring/reg", { username: username, password: pwd });
			window.location.href="/spring/login.html";
		}else{
			return false;
		}
		
	}	  
  );
});

3.演示
演示

猜你喜欢

转载自blog.csdn.net/weixin_44315310/article/details/87900123