注册表单时，如何进行校验呢，接下来直接上干活
<!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，邮件格式
4，姓名，非空
5，手机号，手机号格式
6，出生日期，非空
7，验证码，非空
* */
function checkUsername() {
//usernaem
//1，获取用户名
var usernam = $("#username").val();
//2，定义正则
var reg_usernam = /^\w(8,20)$/;
//3，判断，给出提示信息
var flag = reg_usernam.test(usernam);
if (flag){
//用户名合法
$("#username").css("border","")
}else{
//用户名非法
$("#username").css("border","1px solid red");
}
return flog;
}
function checkPassword() {
//password
//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;
}
//校验邮箱
function checkEmail() {
//校验邮箱
var email = $("#email").val();
//2，定义正则
var reg_rmail = /^\w@\W+\.\w+$/;
//3，判断
var flog = reg_rmail.test(email);
if (flog){
//正确邮箱
$("#email").css("border","")
}else {
//错误邮箱
$("#email").css("border","1px solid red")
}
return flog;
}
$(function () {
//当表单提交时，调用所有的校验方法
$("#registerForm").submit(function () {
return checkUsername() && checkEmail() && checkPassword();
})
})
</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">
<!--提交处理请求的标识符-->
<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="" οnclick="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>