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;
}
到此,我们就已经基本完成了所有的注册界面了,验证码的验证和随机生成,将会在后台服务器中实现。当然登录也需要在后台服务器中实现。