资讯详情

javaweb——基于尚硅谷的书城项目实现

第一阶段-表格验证

1.新建模块

2书城的静态资源复制到模块工程下,文件介绍如下:

(1)首页

(2)pages 页面包含不同模块的目录

——cart 购物车相关

——manager 后台相关

——order 订单相关

——user 用户相关

(3)static 其它静态资源

3、在static包下引入jquery,并在pages/user/regist下指定jquery所在路径

.. 返回上一级目录

//引入jquery  <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>

4.上硅谷书城项目代码显示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="../../static/css/style.css" >  <!--引入jquery-->  <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)创建正则表达式对象     // 正则表达式要求:必须由字母、数字下划线组成,并且长度为 5 到 12 位     var usernamePatt = /^\w{5,12}$/;     // (3)使用test方法验证     // test()方法用于测试字符串是否符合我的规则,匹配后返回true,不匹配就返回false     if(!usernamePatt.test(usernameText)){      // (4)提示用户结果      // 因为只有不匹配才需要提示用户,如果匹配可以直接显示登录页面,所以if条件需要逆转      $("span.errorMsg").text("非法用户!");       //确保页面不跳转      return false;     }     // 二、验证密码:必须由字母、数字下划线组成,并且长度为 5 到 12 位     // (1)获取输入框内容     var passwordText = $("#password").val();     // (2)创建正则表达式对象     // 正则表达式要求:必须由字母、数字下划线组成,并且长度为 5 到 12 位     var passwordPatt = /^\w{5,12}$/;     // (3)使用test方法验证     // test()方法用于测试字符串是否符合我的规则,匹配后返回true,不匹配就返回false     if(!passwordPatt.test(passwordText)){      // (4)提示用户结果      // 因为只有不匹配才需要提示用户,如果匹配可以直接显示登录页面,所以if条件需要逆转      $("span.errorMsg").text("密码非法!");       //确保页面不跳转      return false;     }     // 3.验证和确认密码与密码相同    //  (1)获取确认密码     var repwdText = $("#repwd").val();    //  (2)与密码相比     if(repwdText != passwordText) {      //  (3)提示用户      $("span.errorMsg").text("确认密码与密码不一致!");       //确保页面不跳转      return false;     }     // 4.邮箱验证:xxxxx@xxx.com     // (1)获取输入框内容     var emailText = $("#email").val();     // (2)创建正则表达式对象     // 正则表达式要求:必须是字母,由数字下划线组成,长度为 5 到 12 位     var emailPatt = /^[a-z\d] (\.[a-z\d] )*@([\da-z](-[\da-z])?) (\.{1,2}[a-z] ) $/;     // (3)使用test方法验证     // test()方法用于测试字符串是否符合我的规则,匹配后返回true,不匹配就返回false     if(!emailPatt.test(emailText)){      // (4)提示用户结果      // 因为只有不匹配才需要提示用户,如果匹配可以直接显示登录页面,所以if条件处需取反      $("span.errorMsg").text("邮箱格式不合法!");       //确保页面不跳转      return false;     }     // 5.验证码:现在只需要验证用户已经输入。");       //确保页面不跳转      return false;     }     // 5.验证码:现在只需要验证用户已经输入。因为服务器还没说。生成验证码。     var codeText = $("#code").val();     if(codeText==null || codeText==""){      // (4)提示用户结果      $("span.errorMsg").text("验证码不能为空!");            //去掉验证码前后空格      codeText = $.trim(codeText);            //确保页面不跳转      return false;     }     // 6.当用户名输入先违法后合法时,原违法提示应在提交前删除    $("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 clas="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>

 

标签: 2静态交流断电延时继电器zsj

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台