js经典校验之注册与登录校验

最新推荐文章于 2022-11-25 21:10:39 发布
最新推荐文章于 2022-11-25 21:10:39 发布
阅读量655 收藏 2
点赞数

转发：https://www.cnblogs.com/gluncle/p/8485198.html

例子1

1.1用户注册jsp页面

<%@ 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="<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>

1.2 用户注册校验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());  
}

例子2

2.1 用户登录jsp

<%@ 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">  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/login.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/login.js'/>"></script>  
    <script src="<c:url value='/js/common.js'/>"></script>  

<script type="text/javascript">  
    $(function() {/*Map<String(Cookie名称),Cookie(Cookie本身)>*/  
        // 获取cookie中的用户名  
        var loginname = window.decodeURI("${cookie.loginname.value}");  
        if("${requestScope.user.loginname}") {  
            loginname = "${requestScope.user.loginname}";  
        }  
        $("#loginname").val(loginname);  
    });  
</script>  
  </head>  

  <body>  
    <div class="main">  
      <div><img src="<c:url value='/images/logo.gif'/>" /></div>  
      <div>  
        <div class="imageDiv"><img class="img" src="<c:url value='/images/zj.png'/>"/></div>  
        <div class="login1">  
          <div class="login2">  
            <div class="loginTopDiv">  
              <span class="loginTop">传智会员登录</span>  
              <span>  
                <a href="<c:url value='/jsps/user/regist.jsp'/>" class="registBtn"></a>  
              </span>  
            </div>  
            <div>  
              <form target="_top" action="<c:url value='/UserServlet'/>" method="post" id="loginForm">  
                <input type="hidden" name="method" value="login" />  
                  <table>  
                    <tr>  
                      <td width="50"></td>  
                      <td><label class="error" id="msg">${msg }</label></td>  
                    </tr>  
                    <tr>  
                      <td width="50">用户名</td>  
                      <td><input class="input" type="text" name="loginname" id="loginname"/></td>  
                    </tr>  
                    <tr>  
                      <td height="20"> </td>  
                      <td><label id="loginnameError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td>密　码</td>  
                      <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
                    </tr>  
                    <tr>  
                      <td height="20"> </td>  
                      <td><label id="loginpassError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td>验证码</td>  
                      <td>  
                        <input class="input yzm" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }"/>  
                        <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>"/>  
                        <a id="verifyCode">换张图</a>  
                      </td>  
                    </tr>  
                    <tr>  
                      <td height="20px"> </td>  
                      <td><label id="verifyCodeError" class="error"></label></td>  
                    </tr>  
                    <tr>  
                      <td> </td>  
                      <td align="left">  
                        <input type="image" id="submit" src="<c:url value='/images/login1.jpg'/>" class="loginBtn"/>  
                      </td>  
                    </tr>                                                                               
                 </table>  
              </form>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>  
  </body>  
</html>

2.2 用户登录校验js

<span style="font-size:18px;">$(function() {  
    /*  
     * 1. 让登录按钮在得到和失去焦点时切换图片  
     */  
    $("#submit").hover(  
        function() {  
            $("#submit").attr("src", "/goods/images/login2.jpg");  
        },  
        function() {  
            $("#submit").attr("src", "/goods/images/login1.jpg");  
        }  
    );  

    /*  
     * 2. 给注册按钮添加submit()事件，完成表单校验  
     */  
    $("#submit").submit(function(){  
        $("#msg").text("");  
        var bool = true;  
        $(".input").each(function() {  
            var inputName = $(this).attr("name");  
            if(!invokeValidateFunction(inputName)) {  
                bool = false;  
            }  
        });  
        return bool;  
    });  

    /*  
     * 3. 输入框得到焦点时隐藏错误信息  
     */  
    $(".input").focus(function() {  
        var inputName = $(this).attr("name");  
        $("#" + inputName + "Error").css("display", "none");  
    });  

    /*  
     * 4. 输入框推动焦点时进行校验  
     */  
    $(".input").blur(function() {  
        var inputName = $(this).attr("name");  
        invokeValidateFunction(inputName);  
    })  
});  

/*  
 * 输入input名称，调用对应的validate方法。  
 * 例如input名称为：loginname，那么调用validateLoginname()方法。  
 */  
function invokeValidateFunction(inputName) {  
    inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
    var functionName = "validate" + inputName;  
    return eval(functionName + "()");     
}  

/*  
 * 校验登录名  
 */  
function validateLoginname() {  
    var bool = true;  
    $("#loginnameError").css("display", "none");  
    var value = $("#loginname").val();  
    if(!value) {// 非空校验  
        $("#loginnameError").css("display", "");  
        $("#loginnameError").text("用户名不能为空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//长度校验  
        $("#loginnameError").css("display", "");  
        $("#loginnameError").text("用户名长度必须在3 ~ 20之间！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校验密码  
 */  
function validateLoginpass() {  
    var bool = true;  
    $("#loginpassError").css("display", "none");  
    var value = $("#loginpass").val();  
    if(!value) {// 非空校验  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密码不能为空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//长度校验  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密码长度必须在3 ~ 20之间！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校验验证码  
 */  
function validateVerifyCode() {  
    var bool = true;  
    $("#verifyCodeError").css("display", "none");  
    var value = $("#verifyCode").val();  
    if(!value) {//非空校验  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("验证码不能为空！");  
        bool = false;  
    } else if(value.length != 4) {//长度不为4就是错误的  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("错误的验证码！");  
        bool = false;  
    } else {//验证码是否正确  
        $.ajax({  
            cache: false,  
            async: false,  
            type: "POST",  
            dataType: "json",  
            data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
            url: "/goods/UserServlet",  
            success: function(flag) {  
                if(!flag) {  
                    $("#verifyCodeError").css("display", "");  
                    $("#verifyCodeError").text("错误的验证码！");  
                    bool = false;                     
                }  
            }  
        });  
    }  
    return bool;  
}</span>

例子三

3.1用户修改密码jsp

<%@ 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>pwd.jsp</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='/css/css.css'/>">  
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/pwd.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/pwd.js'/>"></script>  
    <script src="<c:url value='/js/common.js'/>"></script>  
  </head>  

  <body>  
    <div class="div0">  
        <span>修改密码</span>  
    </div>  

    <div class="div1">  
        <form action="<c:url value='/UserServlet'/>" method="post" target="_top">  
            <input type="hidden" name="method" value="updatePassword"/>  
        <table>  
            <tr>  
                <td><label class="error">${msg }</label></td>  
                <td colspan="2"> </td>  
            </tr>  
            <tr>  
                <td align="right">原密码:</td>  
                <td><input class="input" type="password" name="loginpass" id="loginpass" value="${user.loginpass }"/></td>  
                <td><label id="loginpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right">新密码:</td>  
                <td><input class="input" type="password" name="newpass" id="newpass" value="${user.newpass }""/></td>  
                <td><label id="newpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right">确认密码:</td>  
                <td><input class="input" type="password" name="reloginpass" id="reloginpass" value="${user.reloginpass }""/></td>  
                <td><label id="reloginpassError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right"></td>  
                <td>  
                  <img id="vCode" src="<c:url value='/VerifyCodeServlet'/>" border="1"/>  
                  <a href="javascript:_change();">看不清，换一张</a>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">验证码:</td>  
                <td>  
                  <input class="input" type="text" name="verifyCode" id="verifyCode" value="${user.verifyCode }""/>  
                </td>  
                <td><label id="verifyCodeError" class="error"></label></td>  
            </tr>  
            <tr>  
                <td align="right"></td>  
                <td><input id="submit" type="submit" value="修改密码"/></td>  
            </tr>  
        </table>  
        </form>  
    </div>  
  </body>  
</html>

3.2 用户修改密码校验js

$(function() {    
    /*  
     * 1. 给注册按钮添加submit()事件，完成表单校验  
     */  
    $("#submit").submit(function(){  
        $("#msg").text("");  
        var bool = true;  
        $(".input").each(function() {  
            var inputName = $(this).attr("name");  
            if(!invokeValidateFunction(inputName)) {  
                bool = false;  
            }  
        });  
        return bool;  
    });  

    /*  
     * 3. 输入框推动焦点时进行校验  
     */  
    $(".input").blur(function() {  
        var inputName = $(this).attr("name");  
        invokeValidateFunction(inputName);  
    });  
});  

/*  
 * 输入input名称，调用对应的validate方法。  
 * 例如input名称为：loginname，那么调用validateLoginname()方法。  
 */  
function invokeValidateFunction(inputName) {  
    inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1);  
    var functionName = "validate" + inputName;  
    return eval(functionName + "()");     
}  

/*  
 * 校验密码  
 */  
function validateLoginpass() {  
    var bool = true;  
    $("#loginpassError").css("display", "none");  
    var value = $("#loginpass").val();  
    if(!value) {// 非空校验  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密码不能为空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//长度校验  
        $("#loginpassError").css("display", "");  
        $("#loginpassError").text("密码长度必须在3 ~ 20之间！");  
        bool = false;  
    });  
    return bool;  
}  

// 校验新密码  
function validateNewpass() {  
    var bool = true;  
    $("#newpassError").css("display", "none");  
    var value = $("#newpass").val();  
    if(!value) {// 非空校验  
        $("#newpassError").css("display", "");  
        $("#newpassError").text("新密码不能为空！");  
        bool = false;  
    } else if(value.length < 3 || value.length > 20) {//长度校验  
        $("#newpassError").css("display", "");  
        $("#newpassError").text("新密码长度必须在3 ~ 20之间！");  
        bool = false;  
    }  
    return bool;  
}  

/*  
 * 校验确认密码  
 */  
function validateReloginpass() {  
    var bool = true;  
    $("#reloginpassError").css("display", "none");  
    var value = $("#reloginpass").val();  
    if(!value) {// 非空校验  
        $("#reloginpassError").css("display", "");  
        $("#reloginpassError").text("确认密码不能为空！");  
        bool = false;  
    } else if(value != $("#newpass").val()) {//两次输入是否一致  
        $("#reloginpassError").css("display", "");  
        $("#reloginpassError").text("两次密码输入不一致！");  
        bool = false;  
    }  
    return bool;      
}  

/*  
 * 校验验证码  
 */  
function validateVerifyCode() {  
    var bool = true;  
    $("#verifyCodeError").css("display", "none");  
    var value = $("#verifyCode").val();  
    if(!value) {//非空校验  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("验证码不能为空！");  
        bool = false;  
    } else if(value.length != 4) {//长度不为4就是错误的  
        $("#verifyCodeError").css("display", "");  
        $("#verifyCodeError").text("错误的验证码！");  
        bool = false;  
    } else {//验证码是否正确  
        $.ajax({  
            cache: false,  
            async: false,  
            type: "POST",  
            dataType: "json",  
            data: {method: "ajaxValidateVerifyCode", verifyCode: value},  
            url: "/goods/UserServlet",  
            success: function(flag) {  
                if(!flag) {  
                    $("#verifyCodeError").css("display", "");  
                    $("#verifyCodeError").text("错误的验证码！");  
                    bool = false;                     
                }  
            }  
        });  
    }  
    return bool;  
}
lgc_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-10-23 Servlet的实现与案例
m0_59708269的博客
10-23 530
Servlet 1.继承HttpServlet类 package com.xxxx.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServle
验证用户是否登录 (认证用户)
qq_46423017的博客
09-15 1940
实现思路、测试：
Jstl验证用户登录
冰云的专栏
01-03 2358
Jstl验证用户登录   select * from user where userName=${param.userName} and userPwd=${param.userPwd}     <font color="red">用户名或密码错误   <a href="index.jsp">重新登录 <c:if test="${!empty que
简单实用jstl实现“登录|注册”
weixin_30485799的博客
02-13 940
package com.ceshi; import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet.jsp.PageContext; import javax.servlet.jsp.tagext.SimpleTagSupport; public clas...
使用JSTL进行页面服务器端校验
我的世界我的梦
05-14 1216
验证JSP(包含用户输入)验证条件为，姓名和年龄均为必填字段，并且年龄必须大于18岁...@ page contentType="text/html; charset=gb2312" %>...@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>...@ taglib prefix="fmt" uri="http:
javascript使用正则表达式实现注册登入校验
10-14
主要为大家详细介绍了javascript使用正则表达式实现注册登入校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js简单实现用户注册信息的校验代码
10-26
介绍了js简单实现用户注册信息的校验代码，有需要的朋友可以参考一下
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
使用java实现注册登录信息验证
jay_musu的博客
11-13 2556
编写java工具包，用来验证字符串格式和获取登录注册验证码。然后再编写注册窗口，实现注册验证功能。
使用JavaScript实现注册页面并验证
weixin_69420643的博客
09-21 5525
使用JavaScript实现注册页面并验证
注册登录验证js
09-10
注册登录js验证代码，javascript学习中关于表单提交和用户输入信息的验证。
判断用户登录和注册验证
04-30
登录验证，判断用户名和密码是否匹配，匹配则成功，否则失败
检验用户登录信息（使有Filter，最终版）
03-21
NULL 博文链接：https://931360439-qq-com.iteye.com/blog/960921
教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验
04-27
教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验
Javascript实现具有验证功能的页面登录
qq_64314976的博客
08-18 3931
使用JS的函数功能，获取屏幕的宽度和高度，并实现居中效果。登录区域设置一定的宽度和高度；打开登录页面时，登录区在浏览器水平、垂直方向上都居中。登录过程中会有相应的提示功能，输入正确后会显示登录成功，否则失败。...
js登录验证
qq_44376244的博客
06-09 2964
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7048
使用JS完成注册页面校验
Java基础基于注册登录校验密码等功能的实现
weixin_68658847的博客
11-25 1017
Java基础基于注册登录校验密码等功能的实现
用户登录和注册功能带验证码
qq_57907966的博客
07-15 1602
因为验证码图片访问和提交注册表单是两次请求，所有要将程序生成的验证码存入Session中。2.在register.jsp修改img的src路径为checkCodeServlet。2.创建checkCodeServlet获取验证码。这时点击"看不清"仍然不会切换验证码图片。在brand.jsp中实现动态用户欢迎。4.设置register.jsp的提示。2、创建一个UserMapper接口。在checkCodeServlet中。点击“看不清”时实现验证码的切换;2、在loginServlet中。...
写一个js登录页面包括校验
最新发布
07-11
好的，我可以为您提供一个简单的 JS 登录页面示例，包括基本的校验功能。 HTML 代码： ``` <!DOCTYPE html> 登录页面 登录 用户名： 密码： ()">登录 <script src="login.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值