1、前台表单校验+异步提交表单
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
* 表单校验：
* 1、用户名校验 ，单词字符，长度8~20位
* 2、密码校验 ，单词字符，长度8~20位
* 3、Email校验，单词字符+@+.+单词字符（com）
* 4、姓名，非空
* 5、手机号，手机号格式
* 6、出生日期，非空
* 7、验证码，非空
* */
//1.定义注册的用户名是否正确方法
function checkUsername() {
//alert("校验用户名"); //注意：不要写错alter,否则F12中有错
//1、获取注册的用户名
var val = $("#username").val();
//2、定义正则表达式
var req_username=/^\w{8,20}$/;
//3、判断是否符合正则表达式
var flag = req_username.test(val);
//4、改变样式
if(flag){
//用户名样式正确
$("#username").css("border","");
}else{
//用户名样式错误
$("#username").css("border","5px solid red");
}
//5、返回flag到submit方法中
return flag;
}
//2.定义注册的密码是否正确方法
function checkPassword() {
//1、获取注册的密码
var val = $("#password").val();
//2、定义正则表达式
var req_password=/^\w{8,20}$/;
//3、判断是否符合正则表达式
var flag = req_password.test(val);
//4、改变样式
if(flag){
//密码样式正确
$("#password").css("border","");
}else {
//密码样式错误
$("#password").css("border", "5px solid red");
}
//5、返回flag到submit方法中
return flag;
}
//3、Email校验，单词字符+@+.+单词字符（com）
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","5px solid red");
}
return flag;
}
//4、姓名，非空
function checkName(){
var name = $("#name").val();
var reg_name= /\S/;
var flag = reg_name.test(name);
if(flag){
//姓名正确
$("#name").css("border","");
}else{
//姓名错误
$("#name").css("border","5px solid red");
}
return flag;
}
//5、手机号，手机号格式
function checkTelephone(){
var telephone = $("#telephone").val();
var reg_telephone= /^1[3456789]\d{9}$/;
var flag = reg_telephone.test(telephone);
if(flag){
//手机号正确
$("#telephone").css("border","");
}else{
//手机号错误
$("#telephone").css("border","5px solid red");
}
return flag;
}
//6、出生日期，非空
function checkBirthday(){
var birthday = $("#birthday").val();
var reg_birthday= /\S/;
var flag = reg_birthday.test(birthday);
if(flag){
//生日正确
$("#birthday").css("border","");
}else{
//生日错误
$("#birthday").css("border","5px solid red");
}
return flag;
}
//7、验证码，非空
function checkCheck(){
var check = $("#check").val();
var reg_check= /\S/;
var flag = reg_check.test(check);
if(flag){
//生日正确
$("#check").css("check","");
}else{
//生日错误
$("#check").css("border","5px solid red");
}
return flag;
}
/*===================================================================================================*/
//.定义on.load，包含提交表单和离焦事件之前对注册信息的校验方法
$(function () {
//当表单提交时，调用校验方法，submit()方法内的参数可以没有，可以是boolean，若返回值为true，则提交表单
//$("#registerForm").submit(checkUserphone()&&checkPassword())
//注意：上面的写法错误，导致页面加载完后就会弹出，而不是点击“注册”按钮后弹出，下面30~32行代码正确
$("#registerForm").submit(function () {
//使用Ajax异步提交表单，表单提交分为'发送数据'和'跳转页面'这两步，若submit()返回false，则不跳转页面
//1.使用ajax发送数据
$.post("registUserServlet",$(this).serialize(),function (data) {
//由于this == #registerForm，是js对象，所以先要转为jQuery对象，再调用serialize()方法将注册信息序列化
})
//2.不跳转页面
/* return checkUsername()&&checkPassword()&&checkEmail()
&&checkName()&&checkTelephone()&&checkBirthday()&&checkCheck();*/
return false;
});
//当鼠标离焦后，进行注册信息校验
$("#username").blur(checkUsername); //注意：这里传入的参数是函数对象，不能加括号
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(checkCheck);
});
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_form_center">
<!--注册表单-->
<form id="registerForm" action="user">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
<td class="td_left">
<label for="birthday">出生日期</label>
</td>
<td class="td_right">
<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
</td>
</tr>
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
<script type="text/javascript">
//图片点击事件
function changeCheckCode(img) {
img.src="checkCode?"+new Date().getTime();
}
</script>
</td>
</tr>
<tr>
<td class="td_left">
</td>
<td class="td_right check">
<input type="submit" class="submit" value="注册">
<span id="msg" style="color: red;"></span>
</td>
</tr>
</table>
</form>
</div>
<div class="rg_form_right">
<p>
已有账号？
<a href="#">立即登录</a>
</p>
</div>
</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>
</html>
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
