一杯咖啡，一盏灯

一串代码，一本书

完整注册+JQuery验证+selert后台校验 


Java代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>注册页面</title>  
      
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!--  
    <link rel="stylesheet" type="text/css" href="styles.css">  
    -->  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">  
  
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>  
    <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>  
  </head>  
    
  <body>  
<div id="divMain">  
  <div id="divTitle">  
    <span id="spanTitle">新用户注册</span>  
  </div>  
  <div id="divBody">  
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">  
    <input type="hidden" name="method" value="regist"/>    
    <table id="tableForm">  
      <tr>  
        <td class="tdText">用户名：</td>  
        <td class="tdInput">  
          <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>  
        </td>  
        <td class="tdError">  
          <label class="errorClass" id="loginnameError">${errors.loginname }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">登录密码：</td>  
        <td>  
          <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="loginpassError">${errors.loginpass }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">确认密码：</td>  
        <td>  
          <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">Email：</td>  
        <td>  
          <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="emailError">${errors.email}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">验证码：</td>  
        <td>  
          <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>  
        </td>  
        <td>  
          <label><a href="javascript:_hyz()">换一张</a></label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>  
        </td>  
        <td>  
          <label></label>  
        </td>  
      </tr>  
    </table>  
</form>      
  </div>  
</div>  
  </body>  
</html>  


 2 注册页面regist的css：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>注册页面</title>  
      
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!--  
    <link rel="stylesheet" type="text/css" href="styles.css">  
    -->  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">  
  
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>  
    <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>  
  </head>  
    
  <body>  
<div id="divMain">  
  <div id="divTitle">  
    <span id="spanTitle">新用户注册</span>  
  </div>  
  <div id="divBody">  
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">  
    <input type="hidden" name="method" value="regist"/>    
    <table id="tableForm">  
      <tr>  
        <td class="tdText">用户名：</td>  
        <td class="tdInput">  
          <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>  
        </td>  
        <td class="tdError">  
          <label class="errorClass" id="loginnameError">${errors.loginname }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">登录密码：</td>  
        <td>  
          <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="loginpassError">${errors.loginpass }</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">确认密码：</td>  
        <td>  
          <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">Email：</td>  
        <td>  
          <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="emailError">${errors.email}</label>  
        </td>  
      </tr>  
      <tr>  
        <td class="tdText">验证码：</td>  
        <td>  
          <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>  
        </td>  
        <td>  
          <label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>  
        </td>  
        <td>  
          <label><a href="javascript:_hyz()">换一张</a></label>  
        </td>  
      </tr>  
      <tr>  
        <td></td>  
        <td>  
          <input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>  
        </td>  
        <td>  
          <label></label>  
        </td>  
      </tr>  
    </table>  
</form>      
  </div>  
</div>  
  </body>  
</html>  
 3 注册页面regist中的JS
Js代码  收藏代码
$(function() {  
    /* 
     * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！ 
     */  
    $(".errorClass").each(function() {  
        showError($(this));//遍历每个元素，使用每个元素来调用showError方法  
    });  
      
    /* 
     * 2. 切换注册按钮的图片 
     */  
    $("#submitBtn").hover(  
        function() {  
            $("#submitBtn").attr("src", "/goods/images/regist2.jpg");  
        },  
        function() {  
            $("#submitBtn").attr("src", "/goods/images/regist1.jpg");  
        }  
    );  
      
    /* 
     * 3. 输入框得到焦点隐藏错误信息 
     */  
    $(".inputClass").focus(function() {  
        var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id  
        $("#" + labelId).text("");//把label的内容清空！  
        showError($("#" + labelId));//隐藏没有信息的label  
    });  
      
    /* 
     * 4. 输入框失去焦点进行校验 
     */  
    $(".inputClass").blur(function() {  
        var id = $(this).attr("id");//获取当前输入框的id  
        var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名  
        eval(funName);//执行函数调用  
    });  
      
    /* 
     * 5. 表单提交时进行校验 
     */  
    $("#registForm").submit(function() {  
        var bool = true;//表示校验通过  
        if(!validateLoginname()) {  
            bool = false;  
        }  
        if(!validateLoginpass()) {  
            bool = false;  
        }  
        if(!validateReloginpass()) {  
            bool = false;  
        }  
        if(!validateEmail()) {  
            bool = false;  
        }  
        if(!validateVerifyCode()) {  
            bool = false;  
        }  
          
        return bool;  
    });  
});  
  
/* 
 * 登录名校验方法 
 */  
function validateLoginname() {  
    var id = "loginname";  
    var value = $("#" + id).val();//获取输入框内容  
    /* 
     * 1. 非空校验 
     */  
    if(!value) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("用户名不能为空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /* 
     * 2. 长度校验 
     */  
    if(value.length < 3 || value.length > 20) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /* 
     * 3. 是否注册校验 
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要请求的servlet  
        data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数  
        type:"POST",  
        dataType:"json",  
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校验失败  
                $("#" + id + "Error").text("用户名已被注册！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;  
}  
  
/* 
 * 登录密码校验方法 
 */  
function validateLoginpass() {  
    var id = "loginpass";  
    var value = $("#" + id).val();//获取输入框内容  
    /* 
     * 1. 非空校验 
     */  
    if(!value) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("密码不能为空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /* 
     * 2. 长度校验 
     */  
    if(value.length < 3 || value.length > 20) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    return true;      
}  
  
/* 
 * 确认密码校验方法 
 */  
function validateReloginpass() {  
    var id = "reloginpass";  
    var value = $("#" + id).val();//获取输入框内容  
    /* 
     * 1. 非空校验 
     */  
    if(!value) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("确认密码不能为空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /* 
     * 2. 两次输入是否一致校验 
     */  
    if(value != $("#loginpass").val()) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("两次输入不一致！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    return true;      
}  
  
/* 
 * Email校验方法 
 */  
function validateEmail() {  
    var id = "email";  
    var value = $("#" + id).val();//获取输入框内容  
    /* 
     * 1. 非空校验 
     */  
    if(!value) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("Email不能为空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /* 
     * 2. Email格式校验 
     */  
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("错误的Email格式！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /* 
     * 3. 是否注册校验 
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要请求的servlet  
        data:{method:"ajaxValidateEmail", email:value},//给服务器的参数  
        type:"POST",  
        dataType:"json",  
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校验失败  
                $("#" + id + "Error").text("Email已被注册！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;          
}  
  
/* 
 * 验证码校验方法 
 */  
function validateVerifyCode() {  
    var id = "verifyCode";  
    var value = $("#" + id).val();//获取输入框内容  
    /* 
     * 1. 非空校验 
     */  
    if(!value) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("验证码不能为空！");  
        showError($("#" + id + "Error"));  
        return false;  
    }  
    /* 
     * 2. 长度校验 
     */  
    if(value.length != 4) {  
        /* 
         * 获取对应的label 
         * 添加错误信息 
         * 显示label 
         */  
        $("#" + id + "Error").text("错误的验证码！");  
        showError($("#" + id + "Error"));  
        false;  
    }  
    /* 
     * 3. 是否正确 
     */  
    $.ajax({  
        url:"/goods/UserServlet",//要请求的servlet  
        data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数  
        type:"POST",  
        dataType:"json",  
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
        cache:false,  
        success:function(result) {  
            if(!result) {//如果校验失败  
                $("#" + id + "Error").text("验证码错误！");  
                showError($("#" + id + "Error"));  
                return false;  
            }  
        }  
    });  
    return true;          
}  
  
/* 
 * 判断当前元素是否存在内容，如果存在显示，不页面不显示！ 
 */  
function showError(ele) {  
    var text = ele.text();//获取元素的内容  
    if(!text) {//如果没有内容  
        ele.css("display", "none");//隐藏元素  
    } else {//如果有内容  
        ele.css("display", "");//显示元素  
    }  
}  
  
/* 
 * 换一张验证码 
 */  
function _hyz() {  
    /* 
     * 1. 获取<img>元素 
     * 2. 重新设置它的src 
     * 3. 使用毫秒来添加参数 
     */  
    $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());  
}

 

 

效果图如下：
posted @ 2017-05-27 16:56  Adam浩淼  阅读(346)  评论(0)    收藏  举报