JAVA EE比較完整的註冊界面，前端實現數據校驗
項目資料，註冊頁面完整的代碼
結合CSS和jQuery實現一個完整的註冊前端頁面，擁有數據校驗功能，先上圖看看效果：
在沒有任何輸入的情況下，不允許提交，並且要提示該項不能爲空
同時也需要校驗，用戶是否輸入了密碼，兩次密碼是否一致，是否輸入了正確的郵箱格式
代碼片段：
首先要在HTML中的標籤中，引入所需要的文件，就是我們的CSS文件和JQuery文件
<!-- 自己編寫的CSS文件 -->
<link rel="stylesheet" type="text/css" href="../css/regist.css"/>
<!-- jQuery的數據包 -->
<script type="text/javascript" type="text/jscript" src="../js/jquery-1.4.2.js"></script>
<!-- 我們自己所編寫的jQUery函數文件 -->
<script type="text/javascript" type="text/jscript" src="../js/regist.js"></script>
<script type="text/javascript">
然後再標籤中實現我們的表單格式，樣式全都不用寫，都在css中實現即可：
<table>
<tr>
<td class="tds">用戶名：</td>
<td>
<input type="text" name="username" placeholder="請輸入用戶名"/><span></span>
</td>
</tr>
<tr>
<td class="tds">密碼：</td>
<td>
<input type="password" name="password" placeholder="請輸入密碼"/><span></span>
</td>
</tr>
<tr>
<td class="tds">確認密碼：</td>
<td>
<input type="password" name="password2" placeholder="請確認密碼"/><span></span>
</td>
</tr>
<tr>
<td class="tds">暱稱：</td>
<td>
<input type="text" name="nickname" placeholder="輸入暱稱"/><span></span>
</td>
</tr>
<tr>
<td class="tds">郵箱：</td>
<td>
<input type="text" name="email" placeholder="輸入你的郵箱"/><span></span>
</td>
</tr>
<tr>
<td class="tds">驗證碼：</td>
<td>
<input type="text" name="valistr"/>
<img src="../img/yzm.jpg" width="" height="" alt="" />
<span></span>
</td>
</tr>
<tr>
<td id="sub_td" colspan="2" class="tds">
<input type="submit" value="註冊用戶" id="submit"/>
</td>
</tr>
</table>
</form>
完成這步之後，就可以進入css和JQuery的編寫了，css只是樣式，而JQuery就需要一定的邏輯了：
Css樣式：
body{
font-family: 微軟雅黑;
background-image: url(../img/DLZCbg.jpg);
background-repeat: no-repeat; /*控制背景是否重複*/
background-position: center 0;/*center 左右居中，0表似乎上下不動*/
}
h1{
text-align: center;
margin-top: 6rem;
margin-bottom: 30px;
color: #990000;
}
table{
margin: 0px auto; /*第一個參數上下（Y軸）不動，第二個參數左右（X軸）自動*/
}
td{
/*行內元素設置邊距不生效，但是可以設置內邊距*/
padding-bottom: 5px;
}
/*將 class=tds 的標籤全部右對齊*/
.tds{
text-align: right;
font-size: 18px;
}
input{
border: 1px solid #cccccc;
width: 150px;
height: 22px;
}
/* 驗證碼輸入框小一些*/
input[name=valistr]{
width: 80px;
}
/*將驗證碼圖片和驗證碼輸入框對齊*/
input[name=valistr],img{
/*將選擇的元素對齊*/
vertical-align: middle;
}
#submit{
border: none;
width: 127px;
height: 44px;
font-size: 20px;
color: #fff;
background-image: url(../img/zc_btn01.jpg);
font-weight: bold;
}
#sub_td{
text-align:center;
padding-top: 5px;
}
#submit:hover{
background-image: url(../img/zc_btn02.jpg);
}
JQuery文件，代碼太多，我就只貼一部分了，其餘的在上面的資料包中有完整代碼：
//如果表單有誤，阻止上傳，給服務器減壓
function checkForm() {
var username=$("input[name=username]").val().trim();
var password=$("input[name=password]").val().trim();
var password2=$("input[name=password2]").val().trim();
var nickname=$("input[name=nickname]").val().trim();
var email=$("input[name=email]").val().trim();
var valistr=$("input[name=valistr]").val().trim();
//使用標誌位來作爲返回值
var flag=true;
//校驗數據
//將上一次的檢驗結果歸位
$("span").html("");
if (username ==""){
$("input[name=username]").nextAll("span").html("用戶名不能爲空！")
flag=false;
}
if (password ==""){
$("input[name=password]").nextAll("span").html("請設置你的密碼")
flag=false;
}
if (password2 !=password){
$("input[name=password2]").nextAll("span").html("兩次密碼不一致")
flag=false;
}
//判斷郵箱
var semail=/^\w+@\w+(\.\w+)+$/;
if (!semail.test(email) && email!=""){
$("input[name=email]").nextAll("span").html("郵箱格式不正確！")
flag=false;
}
if (nickname ==""){
$("input[name=nickname]").nextAll("span").html("暱稱不能爲空！")
flag=false;
}
if (valistr ==""){
$("input[name=valistr]").nextAll("span").html("驗證碼不能爲空！")
flag=false;
}
return flag;
}
到此，我們就已經基本完成了所有的註冊界面了，驗證碼的驗證和隨機生成，將會在後臺服務器中實現。當然登錄也需要在後臺服務器中實現。