尚硅谷书城项目 第一阶段——-表单验证

功能需求：

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

1、新建一个模块

顺次点击File==>New==>Module==> Java Enterprise==>Web Application ==>最终命名为05_book_static，然后点击finish。

尚硅谷书城项目 第一阶段-------表单验证
尚硅谷书城项目 第一阶段-------表单验证

2、把书城的静态资源复制粘贴到05_book_static工程目录下

尚硅谷书城项目 第一阶段-------表单验证

3、表单验证实现如下

注册页面JavaScript脚本：

<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 repwdText = $("#repwd").val();
         //2 和暗码相比较
         if (repwdText != 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();
         //去掉验证码前后空格
         alert("去空格前：["+codeText+"]")
         codeText = $.trim(codeText);
         alert("去空格后：["+codeText+"]")
         if (codeText == null || codeText == "") {
            //4 提示用户
            $("span.errorMsg").text("验证码不能为空！");
            return false;
         }
         $("span.errorMsg").text("");
      });
   });
</script>

登录页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员登录页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
</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>
                        <a href="regist.html">立即注册</a>
                     </div>
                     <div class="msg_cont">
                        <b></b>
                        <span class="errorMsg">请输入用户名和暗码</span>
                     </div>
                     <div class="form">
                        <form action="login_success.html">
                           <label>用户称号：</label>
                  <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" />
                           <br />
                           <br />
                           <label>用户暗码：</label>
                           <input class="itxt" type="password" placeholder="请输入暗码" autocomplete="off" tabindex="1" name="password" />
                           <br />
                           <br />
                           <input type="submit" value="登录" id="sub_btn" />
                        </form>
                     </div>                   
                  </div>
               </div>
            </div>
         </div>
      <div id="bottom">
         <span>
            尚硅谷书城.Copyright &copy;2020
         </span>
      </div>
</body>
</html>