java后端-强哥带你写旅游网-02创建后端数据库和编写前端校验

创建java后端数据库

创建数据库，并命名为travel

CREATE DATABASE travel

此处我以sqlyog来进行创建，如下

使用数据库

USE travel;

在travel创建本次项目所要使用到的表

我在项目中的travel.sql已提供建表语句，将其内容复制到sqlyog中执行即可

执行后，若0 Error就说明建表成功

如下是travel中的表

java后端完成注册功能的编写

以下是实现注册功能，要完成的所有细节流程，如果你看不懂，没关系，可以先对这张图有个印象，后续写的代码，都会以此图为导向

现在我开始打开idea，准备开始编写代码

打开idea后，运行昨天写的项目时，发现报了如下错误

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project travel: Error while storing the mojo status: E:\MyProject\Mytravel\travel\target\maven-status\maven-compiler-plugin\compile\default-compile\inputFiles.lst (拒绝访问。) -> [Help 1]

昨天能运行成功，但今天却运行不了，还真是奇怪，该错误说的是target目录中的一个文件被拒绝访问了，traget目录中的文件是maven在编译项目时自动生成的，那我可以将它删除，然后重新运行。

OK，问题已解决。

现在我就开始准备写注册的功能代码了

当我点击注册时,应该对输入的内容进行校验，具体要校验的内容如下

表单校验：
   1.用户名：单词字符，长度8到20位
   2.密码：单词字符，长度8到20位
   3.email：邮件格式
   4.姓名：非空
   5.手机号：手机号格式
   6.出生日期：非空
   7.验证码：非空

在本次项目中，我只校验用户名，密码，email，剩下的你可以自己补齐。

在注册页面加载完毕后，监听form表单的submit

$(function () {
    //当表单提交时，调用所有的校验方法
    $("#registerForm").submit(function(){
	//1.发送数据到服务器
	if(checkUsername() && checkPassword() && checkEmail()){
	    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
        }
             //2.不让页面跳转
            return false;
            //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
        });

    });

checkUsername()的实现

//单词字符，长度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;
}

checkPassword的实现

//校验密码
function checkPassword() {
    //1.获取密码值
    var password = $("#password").val();
    //2.定义正则
    var reg_password = /^\w{8,20}$/;

    //3.判断，给出提示信息
    var flag = reg_password.test(password);
    if(flag){
        //密码合法
        $("#password").css("border","");
    }else{
        //密码非法,加一个红色边框
        $("#password").css("border","1px solid red");
    }

    return flag;
}

checkEmail的实现

//校验邮箱
function checkEmail(){
    //1.获取邮箱
	var email = $("#email").val();
	//2.定义正则		itcast@163.com
	var reg_email = /^\w+@\w+\.\w+$/;

	//3.判断
	var flag = reg_email.test(email);
	if(flag){
        $("#email").css("border","");
	}else{
        $("#email").css("border","1px solid red");
	}

	return flag;
}

当输入框失去焦点时，此时也应该再次去校验输入框的内容是否正确

//当某一个组件失去焦点是，调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);

如何获取表单中填写的数据

通过调用form对象的serialize(),可获取表单中所有填写的数据，获取到的数据格式如下

username=zhangsan&password=123

将表单中填写的数据发送到服务器上

此处采用ajax将数据发送到服务器上

$.post("registUserServlet",$(this).serialize(),function(data){
	//处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

	if(data.flag){
	    //注册成功，跳转成功页面
		location.href="register_ok.html";
	}else{
	    //注册失败,给errorMsg添加提示信息
		$("#errorMsg").html(data.errorMsg);

	}
});

项目地址https://gitee.com/cxyhq2020/Mytravel.git