<!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> //校验用户名 function checkUserName() { //1、获取控件username的值 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","solid 1px red"); } return flag; } //校验密码 function checkPassword() { //1、获取password控件的输入值 var password = $("#password").val(); //2、定义正则表达式 var reg_password = /^\w{8,20}$/; //3、判断 var flag = reg_password.test(password); if(flag){ $("#password").css("border","solid 1px green"); }else{ $("#password").css("border","solid 2px red"); } return flag; } //校验邮箱 function checkEmail() { //1、获取email中的值 var email = $("#email").val(); //2、定义正则表达式 var reg_email = /^\w+@\w+\.\w+$/; //3、判断 var flag = reg_email.test(email); if(flag){ $("#email").css("border","solid 1px green"); }else{ $("#email").css("border","solid 2px red"); } return flag; } //校验姓名 function checkname() { //1、获取name的值 var name = $("#name").val(); //2、定义正则表达式 var reg_name = /^\w{3,20}$/; var flag = reg_name.test(name); //3、判断 if(flag){ $("#name_msg").css("border","solid 1px green"); }else{ $("#name_msg").css("border","solid 1px red"); } return flag; } function checktelephone() { //1、获取telephone的值 var telephone = $("#telephone").val(); //2、定义正则表达式 var reg_telphone =/^1[34589][0-9]{9}$/; //3、判断 var flag = reg_telphone.test(telephone); if(flag){ $("#telephone").css("border","solid 1px green"); }else{ $("#telephone").css("border","solid 1px red"); } return flag; } $(function () { //当表单提交的时候，调用所有的验证方法 $("#registerForm").submit(function () { //发送数据到服务器 if(checkUserName() && checkPassword() && checkEmail() && checkname() && checktelephone()){ $.post("registUserServlet",$(this).serialize(),function(data){ }); } return false; }); //失去焦点时，调用方法 $("#username").blur(checkUserName); $("#password").blur(checkPassword); $("#email").blur(checkEmail); $("#name").blur(checkname); $("#telephone").blur(checktelephone); }); </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>
来源：https://www.cnblogs.com/newcityboy/p/11588378.html