JAVA EE比较完整的注册界面，前端实现数据校验篇（第一篇，前端）

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;

        }

到此，我们就已经基本完成了所有的注册界面了，验证码的验证和随机生成，将会在后台服务器中实现。当然登录也需要在后台服务器中实现。

下载上面项目的完整代码