914~916 注册功能分析,表单校验
注册页面效果
功能分析 :
表单校验
提升用户体验,并减轻服务器压力。
<!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.验证码:非空 */ //校验用户名 //1.用户名:单词字符,长度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; } //校验密码 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; } //校验邮箱 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; } $(function () { //当表单提交时,调用所有的校验方法 $("#registerForm").submit(function(){ //1.发送数据到服务器 if(checkUsername() && checkPassword() && checkEmail()){ //校验通过,发送ajax请求,提交表单的数据 username=zhangsan&password=123 $.post("registUserServlet",$(this).serialize(),function(data){ //处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"} if(data.flag){ //注册成功,跳转成功页面 location.href="register_ok.html"; }else{ //注册失败,给errorMsg添加提示信息 $("#errorMsg").html(data.errorMsg); }});} //2.不让页面跳转 return false; //如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false,则表单不提交 }); //当某一个组件失去焦点是,调用对应的校验方法 $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); }); </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>