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

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

验证用户名:必须由字母,数字下划线组成,并且长度为 5 到 12 位 
验证密码:必须由字母,数字下划线组成,并且长度为 5 到 12 位 
验证确认密码:和密码相同 邮箱验证:[email protected] 
验证码:现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。

1.创建一个模块

Day116.简单书城项目---第一阶段 -JavaWeb_第1张图片


<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;
                  }

            //邮箱验证:[email protected]
                  //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 ©2015
         span>
      div>
body>
html>

感谢尚硅谷

你可能感兴趣的:(JavaWeb,java)