综合案例-黑马旅游网注册功能分析
图解
综合案例-黑马旅游网注册功能_表单校验
表单校验功能
- 用户名:单词字符 长度8到20位
- 密码:单词字符 长度8到20位
- email:邮件格式
- 姓名:非空
- 手机号:手机号格式
- 出生日期:非空
- 验证码:非空
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> //校验用户名 function checkUsername() { //1.获取用户名值 var username = $("#username").val(); //2.定义正则 var reg_username = /^\w{8,20}$/; //判断 给出提示信息 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}$/; //判断 给出提示信息 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+$/; //判断 给出提示信息 var flag = reg_email.test(email); if (flag) { //用户名合法 $("#email").css("border", "") } else { //用户名违法 $("#email").css("border", "1px solid red"); } return flag; } //校验姓名 function checkname(){ //1.获取姓名值 var name = $("#name").val(); //2.定义正则 var reg_name = /^\w+$/; //判断 给出提示信息 var flag = reg_name.test(name); if (flag) { //用户名合法 $("#name").css("border", "") } else { //用户名违法 $("#name").css("border", "1px solid red"); } return flag; } //校验手机号 function checktelephone(){ //1.获取手机号值 var telephone = $("#telephone").val(); //2.定义正则 var reg_telephone = /^\w+(?:(?!0)\d*|0)?$/; //判断 给出提示信息 var flag = reg_telephone.test(telephone); if (flag) { //用户名合法 $("#telephone").css("border", "") } else { //用户名违法 $("#telephone").css("border", "1px solid red"); } return flag; } //校验出生日期 function checkbirthday(){ //1.获取出生日期值 var birthday = $("#birthday").val(); //2.定义正则 var reg_birthday = /^\d{4}-\d{2}-\d{2}$/; //判断 给出提示信息 var flag = reg_birthday.test(birthday); if (flag) { //用户名合法 $("#birthday").css("border", "") } else { //用户名违法 $("#birthday").css("border", "1px solid red"); } return flag; } //校验验证码 function check(){ //1.获取验证码值 var check = $("#check").val(); //2.定义正则 var reg_check = /^\w+$/; //判断 给出提示信息 var flag = reg_check.test(check); if (flag) { //用户名合法 $("#check").css("border", "") } else { //用户名违法 $("#check").css("border", "1px solid red"); } return flag; } $(function () { //当表单提交时 调用所有的校验方法 $("#registerForm").submit(function () { return checkUsername() && checkPassword() && checkEmail() && checkname() && checktelephone() && checkbirthday() && check(); //如果这个方法没有返回值 或者返回位true 则表单提交 如果返回为false 则表单不提交 }); //当某一个组件失去焦点是 调用对应的校验方法 $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); $("#name").blur(checkname); $("#telephone").blur(checktelephone); $("#birthday").blur(checkbirthday); $("#check").blur(check); }) </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"> <div id="errorMsg" style="color:red;text-align: center"></div> <!--注册表单--> <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="login.html">立即登录</a> </p> </div> </div> </div> <!--引入尾部--> <div id="footer"></div> <!--导入布局js,共享header和footer--> <script type="text/javascript" src="js/include.js"></script> </body> </html>
运行结果