农大旅游网案例第一期——用户注册（上）

剑武沧穹

媒介

正在进修了一段工夫的JavaWeb常识后，专主远期方案写一个综开的案例——农年夜旅游网。
正在那内里，会包罗：用户登录，用户注册，用户激活，网页设想，数据库创立等多个常识。正在本章的第一篇，我们首先去完成用户注册如许一个功用。

功用阐发

结果：我们希冀用户注册页里能够到达如许一个结果：它能够正在用户输进疑息后主动的来检测输进疑息的合理性，并做出响应的反应；而且当我们面击了注册按钮后，只要当输进的疑息合理时，用户表单才能够提交让背景来校验。那里我们选用jQuery完成反应结果，ajax去完成同步提交表单。
页里：那里的页里我们选用的是html页里
数据库：创立一个tab_user表，记载闭于用户注册的相干疑息；经由过程Servlet，JDBC，java去完成用户疑息查重战保留的操作

注释

正在本节中，我们首先完成注册界里及其查验
为便利导包操作，该项目我们挑选用Maven去创立
构造图以下：

前台：

注册页里展现：

源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript"></script>
<style>/*经由过程style引进CSS*/
* {
/*盒子模子,设置其窗体巨细没有会变*/
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body { /*布景*/
background: url("image/海滨云朵2.jpg") no-repeat center
}
.rg_layout { /*注册框*/
/*规划*/
width: 900px;
height: 530px;
/*表里鸿沟像素好，战之间的色彩：灰*/
border: 8px solid #EEEEEE;
/*内乱鸿沟的布景色*/
background-color: white;
/*程度居中*/
/*间隔上真个间隔*/
margin: 80px auto auto;
}
.rg_left { /*新用户注册几个字*/
/* border: 1px solid red;*/
float: left;
}
.rg_left > p:first-child { /*挑选p:first-child上的女类挑选器.rg_left*/
color: rgba(89, 120, 231, 0.77);
size: 20px;
/*中边距*/
margin: 15px;
}
.rg_left > p:last-child {
color: #A6A6A6;
size: 20px;
}
.rg_right { /*已有账号*/
/* border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p :first-child { /*立刻登录*/
color: #18d3e5;
font-size: 14px;
}
.form-horizontal {
float: left;
margin-left: 90px;
margin-top: 40px;
/* border: 1px solid #5cb85c;*/
width: 59%;
margin-bottom: -50px;
}
.col-sm-2 control-label {
margin-right: 50px;
}
.form-group {
margin-left: 30px;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<form action="/registerUserServlet" method="get" class="form-horizontal" id="registerFrom">
<div class="form-group">
<label for="username" class="col-sm-3 control-label">Username</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="username" placeholder="请输进姓名" name="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="password" placeholder="请输进暗码" name="password">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" placeholder="请输进邮箱" name="email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-3 control-label">姓名</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="name" placeholder="请输进姓名" name="name">
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-3 control-label">号码</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="telephone" placeholder="请输进号码" name="telephone">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">性别</label>
<div class="col-sm-5" style="margin-top: 5px">
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female" style="margin-left: 20px">女
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-sm-3 control-label">诞生日期</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="birthday" name="birthday" placeholder="请输进诞生日期">
</div>
</div>
<div class="form-group">
<label for="checkCode" class="col-sm-3 control-label">考证码</label>
<div class="col-sm-7">
<input type="text " class="form-control" id="checkCode" placeholder="请输进考证码" name="checkCode"
style="width: 50%;float: left;margin-right: 30px">
<canvas id="canvas" onclick="dj()" style="border: 1px solid #ccc;
border-radius: 5px;width: 95px;height: 35px"></canvas>
<font id="errorMsg" style="font-family:隶书,serif;font-size: 17px "></font>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" style="margin-top: 5px;margin-left: 150px">
<button type="submit" class="btn btn-success" style="width: 80px;height: 40px" id="register"
onclick="sublim()">Login
</button>
<button type="reset" class="btn btn-warning" style="width: 80px;height: 40px" id="reset">Reset
</button>
</div>
</div>
</form>
</div>
<div class="rg_right">
<p>已有账号?<a href="login.html">立刻登录</a></p>
</div>
</div>
</body>
</html>

复造代码

关于用户疑息合理性效验，考证码和同步提交表单，我们经由过程jQuery完成：
[code]<script> var codeFlag = false;//用于断定考证码能否准确 function sublim() { //那里为提交按钮绑订单击事变，面击后主动停止考证码断定 var val = document.getElementById("checkCode").value; var num = show_num.join(""); if (val == '') { $("#errorMsg").html("请输进考证码！") $("#errorMsg").css("color", "rgba(219,174,11,0.97)"); } else if (val.compare(num)) { $("#errorMsg").html("提交胜利！") $("#errorMsg").css("color", "green"); codeFlag = true; /* alert("codeFlag="+codeFlag);*/ document.getElementById(".input-val").val(''); draw(show_num); } else { /* alert('考证码毛病！\n您输进的是: ' + val + "\n准确的是: " + num + '\n请从头输进！');*/ $("#errorMsg").html("考证码毛病！"); $("#errorMsg").css("color", "red"); codeFlag = false; /* alert("codeFlag="+codeFlag);*/ document.getElementById("code").value = ''; draw(show_num); } } /** * 表单离焦同步校验： * 1.用户名：少度8-20位 * 2.密码：单词字符，少度8-20位 * 3.email：邮件格局 * 4.姓名：非空 * 5.脚机号：脚机号的格局(11位数字) * 6.诞生日期：非空 * 7.考证码：非空 */ //校验用户名 function checkUsername() { let username = $("#username").val(); username = username.replace(/^\s*|\s*$/g, ""); var flag; if (username != null && username !== "") { $("#username").css("border", ""); flag = true; } else { $("#username").css("border", "1px solid red"); flag = false } return flag; } //校验用户名 function checkPassword() { //1.获得用户名 const password = $("#password").val(); //2.界说正则:少度8-20位的单词字符组成 const reg_password = /^\w{8,20}$/; //3.断定，给出提醒疑息 const flag = reg_password.test(password); if (flag) {//用户名合理 $("#password").css("border", ""); } else {//用户名没有合理 $("#password").css("border", "1px solid red"); } return flag; } function checkEmail() { const email = $("#email").val(); const reg_email = /^\w+@\w+\.\w+$/; const flag = reg_email.test(email); if (flag) { $("#email").css("border", ""); } if (!flag) { $("#email").css("border", "1px solid red"); } return flag; } function checkName() { const name = $("#name").val(); if (name != null && name != "") { $("#name").css("border", ""); return true; } else { $("#name").css("border", "1px solid red"); return false; } } function checkBirthday() { const birthday = $("#birthday").val(); if (birthday != null && birthday != "") { $("#birthday").css("border", ""); return true; } else { $("#birthday").css("border", "1px solid red"); return false; } } function checkCode() { const code = $("#checkCode").val(); if (code != null && code != "") { $("#checkCode").css("border", ""); return true; } else { $("#checkCode").css("border", "1px solid red"); return false; } } function checkTel() { const tel = $("#telephone").val(); const reg_tel = /^[0-9]*$/; const flag = reg_tel.test(tel); if (flag) { $("#telephone").css("border", ""); } if (!flag) { $("#telephone").css("border", "1px solid red"); } return flag; } /** * 同步（ajax）提交表单 * 正在此操纵同步提交表单是为了获得效劳器响应的数据， * 由于我们前台操纵的是html做为试图层，不克不及间接从servlet相干的域工具获得值 * 只能经由过程ajax获得响应数据 */ $(function () { //当表单提交时，挪用局部的办法,若挪用的办法返回ture或出有返回值，则表单提交；若返回false则表单没有提交 $("#registerFrom").submit(function () { /**那里是要绑定全部表单，而没有是提交按钮！！！*/ //1.收收数据到效劳器 if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTel() && checkBirthday() && checkCode() && codeFlag) {//没有要减括号 alert("校验胜利") $.get("registerUserServlet", $(this).serialize(), function (data) { //处置效劳器响应的数据 data {内乱容有:flag,data,errorMsg,} alert(data.flag+" "+data.errorMsg); if (data.flag) { //注册胜利 location.href="register_ok.html"; /**留意为location.href而没有是Location.href*/ /* return true;*/ } else {//注册失利,给errorMeg增加疑息 alert(data.errorMsg); $("#errorMsg").html(data.errorMsg); $("#errorMsg").css("color","red"); /*return false;*/ } }); } else { /* alert("noPass!")*/ //设置为false是效验欠亨过期，制止跳转页里。保存当前页里形态 return false; } }); //落空中心后挪用相干办法（留意函数名没有要带括号！！） $("#username").blur(checkUsername); $("#password").blur(checkPassword); $("#email").blur(checkEmail); $("#name").blur(checkName); $("#birthday").blur(checkBirthday); $("#code").blur(checkCode); $("#telephone").blur(checkTel); }); /** * 天生考证码 * @param show_num */ var show_num = []; draw(show_num); function draw(show_num) { var canvas_width = document.getElementById('canvas').clientWidth; var canvas_height = document.getElementById('canvas').clientHeight; var canvas = document.getElementById("canvas");//获得到canvas的工具，演员 var context = canvas.getContext("2d");//获得到canvas绘图的情况，演员演出的舞台 canvas.width = canvas_width; canvas.height = canvas_height; var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m"; var aCode = sCode.split(","); var aLength = aCode.length;//获得到数组的少度 for (var i = 0; i

农大旅游网案例第一期——用户注册（上）

浏览过的版块