注册功能_前台_表单校验2与注册功能_前台_异步提交表单
注册功能_前台_表单校验2
//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){ //用户名合法 }else { //用户名非法 $("#username").css("border","1px solid red") } return true }
//校验用户名 //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 passwrod =$("#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 }
点击注册：
提交成功
<!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.定义正则 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 (){ return checkUsername() && checkPassword() && checkEmail(); //如果这个方法没有返回值，或者返回为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>
注册功能_前台_异步提交表单
在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet,相关的域对象获取值，只能通过ajax获取响应数据
$(function (){ //当表单提交时，调用所有的校验方法 $("#registerForm").submit(function (){ //1.发送数据到服务器 if (checkUsername()&& checkPassword()&&checkEmail()){ //校验通过。发送ajax请求， 提交表单的数据 username=zhangsan&password=123 $.post("registUserServlet",$(this).serialize(),function (data){ //创建服务器响应的数据 data }); } //2.跳转页面 return false; //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交 });
