《黑马旅游网》综合案例（二）注册功能前台
分析：
代码实现
1.前台效果
1.表单校验
2.异步(ajax)提交表单
表单校验：
1.用户名：单词字符，长度8到20位
2.密码：单词字符，长度8到20位
3.email：邮件格式
4.姓名：非空
5.手机号：手机号格式
6.出生日期：非空
7.验证码：非空
register.html：
在表单提交一个属性
script：编写
<script> /* 表单校验： 1.用户名：单词字符，长度8到20位 2.密码：单词字符，长度8到20位 3.email：邮件格式 4.姓名：非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：非空 */ //校验用户名 function checkUsername() { //获取用户名值 var username = $("#username").val(); //定义正则 var reg_username = /^\w{8,20}$/; //判断，给出提示 var flag = reg_username.test(username); if (flag){ //用户名合法 $("#username").css("border","") }else { //用户名非法,加一个红色边框 $("#username").css("border","1px solid red") } return flag; } //校验密码 function checkPassword() { //获取用户名值 var password = $("#password").val(); //定义正则 var reg_password = /^\w{8,20}$/; //判断，给出提示 var flag = reg_password.test(password); if (flag){ //用户名合法 $("#password").css("border","") }else { //用户名非法,加一个红色边框 $("#password").css("border","1px solid red") } return flag; } //校验邮箱： function checkEmail(){ //获取对应的邮箱 var email = $("#email").val(); //定义正则 var reg_email = /^\w+@\w+\.\w+$/; //判断 var flag = reg_email.test(email); if (flag){ $("#email").css("border","") }else { $("#email").css("border","1px solid red") } return flag; } //4.姓名：非空 function checkName(){ //获取用户名 var name = $("#name").val(); //定义正则，非空 var reg_name = /^[\u4e00-\u9fa5A-Za-z]+$/; //判断输入的是否合法 var flag = reg_name.test(name); if (flag){ $("#name").css("border","") }else { $("#name").css("border","1px solid red") } return flag; } //5.手机号：手机号格式 function checkTelephone() { //1.获取用户名 var telephone = $("#telephone").val(); //2.定义正则, 11位 var reg_telephone = /^\d{11}$/; //3.判断输入的是否合法 var flag = reg_telephone.test(telephone); if(flag) { $("#telephone").css("border",""); } else { $("#telephone").css("border","1px solid red"); } return flag; } //6.出生日期：非空 function checkBirthday() { //1.获取用户名 var birthday = $("#birthday").val(); //2.定义正则, 非空 var reg_birthday = /^\d{4}-\d{2}-\d{2}$/; //3.判断输入的是否合法 var flag = reg_birthday.test(birthday); if(flag) { $("#birthday").css("border",""); } else { $("#birthday").css("border","1px solid red"); } return flag; } //7.验证码：非空 function checkCheckCode(){ //获取用户名 var check = $("#check").val(); //定义正则 var reg_check = /^\w+$/; //判断是否合法 var flag = reg_check.test(check); if(flag) { $("#check").css("border",""); } else { $("#check").css("border","1px solid red"); } return flag; } $(function () { //当表单提交时，调用所有的校验方法 $("#registerForm").submit(function () { return checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheckCode(); //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则不提交 }); //当某一个组件失去焦点时，调用对应的校验方法 $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); $("#name").blur(checkName); $("#telephone").blur(checkTelephone); $("#birthday").blur(checkBirthday); $("#check").blur(checkCheckCode); }); </script>
异步提交表单：
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，
不能直接从Servlet相关的域对象获取值，只能通过ajax获取响应数据
对其进行修改添加一个div用来显示错误信息：
添加了个if判断进行异步提交
$(function () {
//当表单提交时，调用所有的校验方法
$("#registerForm").submit(function () {
//发送数据到服务器
if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday() && checkCheckCode()){
//校验通过，发送ajax请求，提交表单的数据
$.post("registUserServlet",$(this).serialize(),function (data) {
//处理服务器响应的数据
if (data.flag){
//注册成功，跳转成功页面
location.href="register_ok.html";
}else {
//注册失败
$("#errorMsg").html(data.errorMsg);
}
});
}
return false;
//如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则不提交
});
//当某一个组件失去焦点时，调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(checkCheckCode);
});
