基于maven的旅游网站设计之登录注册页面

技术结构

分为web，Servlet，Service，Dao四层结构
1.web层采用html格式来编写，相较于jsp格式加快了用户的访问速度，首先用正则表达式进行判断，然后但表单提交时调用校验方法，采用异步的ajax方法。
2.Servlet层来封装User对象，并调用service完成注册，并返回service所提供的信息。
3.service层调用Dao查询用户对象，并判断用户对象是否存在，存在则返回FALSE，不存在则调用Dao保存用户数据。
4.Dao层定义接口，并重写方法findByUsername和save(User user)来分别查询数据与保存数据。

Web层

这里略去html的内容，导入JQuery后，校验用户名

//校验用户名
			//单词字符，长度8到20位
			function checkUsername() {
   
                //1.获取用户名值
				var username = $("#username").val();
				//2.定义正则
				var reg_username = /^\w{
   8,20}$/;
				
				//3.判断，给出提示信息
			    var flag = reg_username.test(username);
			    if(flag){
   
			        //用户名合法
                    $("#username").css("border","");
				}else{
   
			        //用户名非法,加一个红色边框
					$("#username").css("border","1px solid red");
				}
			    
                return flag;
            }

同理校验密码与邮箱。
然后当表单提交时，采用ajax进行异步提交，并将之前的校验方法绑定失焦状态，实现校验。

在$(function () {
   
                //当表单提交时，调用所有的校验方法
				$("#registerForm").submit(function(){
   
					//发送数据到服务器
					if(checkUsername() && checkPassword() && checkEmail()){
   
					    //校验通过,发送ajax请求，提交表单的数据   
						$.post("registUserServlet",$(this).serialize(),function(data){
   
							//处理服务器响应的数据  
							if(data.flag){
   
							    //注册成功，跳转成功页面
								location.href="register_ok.html";
							}else{
   
							    //注册失败,给errorMsg添加提示信息
								$("#errorMsg").html(data.errorMsg);

							}
						})