Day116.简单书城项目---第一阶段 -JavaWeb

最新推荐文章于 2022-05-09 10:54:58 发布

阿昌喜欢吃黄桃

最新推荐文章于 2022-05-09 10:54:58 发布

阅读量415

点赞数

分类专栏： JavaWeb 文章标签： java

本文链接：https://blog.csdn.net/qq_43284469/article/details/110286399

版权

JavaWeb 专栏收录该内容

33 篇文章 5 订阅

订阅专栏

书城项目—第一阶段(表单验证)

验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位 
验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位 
验证确认密码：和密码相同 邮箱验证：xxxxx@xxx.com 
验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。

1.创建一个模块

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
   <link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
   <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      //页面加载完成之后
      $(function (){
         //注册绑定单击事件
         $("#sub_btn").click(function (){

            // 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
                  //1. 获取用户名框里的内容
                     var usernameText = $("#username").val();
                  //2. 创建正则表达式对象
                     var usernamePatt = /^\w{5,12}$/;
                  //3. 使用test()验证
                     if (!usernamePatt.test(usernameText)){
                        //4. 提示用户结果
                        $("span.errorMsg").text("用户名不合法");
                        return false;
                     }

            // 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位
                  //1. 获取密码框里的内容
                  var passwordText = $("#password").val();
                  //2. 创建正则表达式对象
                  var passwordPatt = /^\w{5,12}$/;
                  //3. 使用test()验证
                  if (!passwordPatt.test(passwordText)){
                     //4. 提示用户结果
                     $("span.errorMsg").text("密码不合法");
                     return false;
                  }

            // 验证确认密码：和密码相同
                  //1. 获取确认密码框里的内容
                  var repasswordText = $("#repwd").val();
                  //2. 和密码比较
                  if (repasswordText != passwordText){
                     //3. 提示用户结果
                     $("span.errorMsg").text("确认密码和密码不一致");

                     return false;
                  }

            //邮箱验证：xxxxx@xxx.com
                  //1. 获取邮箱框里的内容
                  var emailText = $("#email").val();
                  //2. 创建正则表达式对象
                  var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                  //3. 使用test()验证
                  if (!emailPatt.test(emailText)){
                     //4.提示用户结果
                     $("span.errorMsg").text("邮箱格式非法");

                     return false;
                  }


				// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
						var codeText = $("#code").val();
						//去掉验证码前后空格内容
							var trim = $.trim(codeText);
						if (trim==null||trim===""){
							//提示用户
							$("span.errorMsg").text("请输入验证码");

							return false;
						}


            $("span.errorMsg").text("");

         });




      });


   </script>
<style type="text/css">
   .login_form{
      height:420px;
      margin-top: 25px;
   }
   
</style>

</head>
<body>
      <div id="login_header">
         <img class="logo_img" alt="" src="../../static/img/logo.gif" >
      </div>
      
         <div class="login_banner">
         
            <div id="l_content">
               <span class="login_word">欢迎注册</span>
            </div>
            
            <div id="content">
               <div class="login_form">
                  <div class="login_box">
                     <div class="tit">
                        <h1>注册尚硅谷会员</h1>
                        <span class="errorMsg"></span>
                     </div>
                     <div class="form">
                        <form action="regist_success.html">
                           <label>用户名称：</label>
                           <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
                           <br />
                           <br />
                           <label>用户密码：</label>
                           <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
                           <br />
                           <br />
                           <label>确认密码：</label>
                           <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                           <br />
                           <br />
                           <label>电子邮件：</label>
                           <input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" />
                           <br />
                           <br />
                           <label>验证码：</label>
                           <input class="itxt" type="text" style="width: 150px;" id="code"/>
                           <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">                          
                           <br />
                           <br />
                           <input type="submit" value="注册" id="sub_btn" />
                           
                        </form>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      <div id="bottom">
         <span>
            尚硅谷书城.Copyright &copy;2015
         </span>
      </div>
</body>
</html>