使用jQuery Validate相关问题

最新推荐文章于 2023-08-11 16:30:25 发布

G-two

最新推荐文章于 2023-08-11 16:30:25 发布

阅读量711

点赞数

分类专栏： jquery-validation 文章标签：验证码

本文链接：https://blog.csdn.net/guan779138100/article/details/49511543

版权

jquery-validation 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

预期目的：

在重置密码页面中，用户输入账号密码点击发送验证码，假如验证码输入错误的情况下点击保存密码，后台返回一个错误信息给页面显示。

重置密码页面当前实现逻辑介绍：

页面使用jQuery Validate对页面字段进行验证。三个字段的验证错误信息都都使用<div id="errorMessage" class="errorMessage"></div>装载，以红色文字显示在保存按钮上方的。

重置密码页面的账号字段需要验证用户输入的账号是否存。

点击保存会把三个参数的数据传到控制层的方法，该方法的返回类型是ModelAndView。如果成功跳转回登录页面；如果失败返回重置密码页面，且ModelAndView包含错误信息等属性。

页面使用EL表达式获取控制层返回的参数值。（如果验证码错误，控制层设定mav.addObject("errorMessage", "验证码错误"); 页面使用${errorMessage}来获取信息）。

问题所在：

页面读取${errorMessage}，如果非空，页面设定$("#validateForm").validate().showErrors({"validateNum":"${errorMessage}"});

可是，该验证错误信息不能一直显示，而是被账号字段的remote验证覆盖了

主要代码如下：

validate.jsp页面jQuery代码

验证定义在88行以后

<script type="text/javascript">
var InterValObj; //验证码时间变量
var count = ${count }; //间隔函数，1秒执行
var curCount;//当前剩余秒数
// 发送验证码
function getCodeVerify(){
        var successNum = $("#account").valid()+$("#pw").valid();
        var actionUrl = "${basePath }/rrt/user/codeVerify/getVerifyCode.do";
        phoneNum = $("#account").val();
        validType = $("#validType").val();
        if(successNum==2 && validType!=""){
            nengLongAjax({
                url:actionUrl,
                data:{"phoneNum":phoneNum,"validType":validType},
                async:false, 
                success:function(r){
                    if(r.data==true || r.data=="true"){
                        curCount = count;
                        //设置button效果，开始计时
                        $("#btnSendCode").attr("disabled", "true");
                        $("#btnSendCode").css({color:"#838383","background-color":"#e5e5e5"});
                        $("#btnSendCode").val("发送成功（" + curCount + "）");
                        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                    }else{
                         $("#errorMessage").html(r.error);
                    }
                }
            })    
        }else{
            if($("#account").valid()==0 && $("#pw").valid()==0){
                $("#errorMessage").html("请输入合法的账号密码");
            }else if($("#pw").valid()==0){
                $("#errorMessage").html("请输入合法的密码");
            }else if($("#account").valid()==0){
                $("#errorMessage").html("账号不合法或账号不存在");
            }
        }
}

//timer处理函数
function SetRemainTime() {
  if (curCount == 0) {
    $("#errorMessage").html("");
    window.clearInterval(InterValObj);//停止计时器
    $("#btnSendCode").removeAttr("disabled");//启用按钮
    $("#btnSendCode").val("重新发送验证码");
    $("#btnSendCode").css({color:"#fff","background-color":"#15aea2"});
  }
  else {
      curCount--;
      $("#btnSendCode").val("发送成功（" + curCount + "）");
  }
}

// 密码显示与隐藏
function showPassword(){
    var temp = $("#pw").attr("value");
    if($("#pw").attr("type")=="password"){
        $("#sp").html('<input type="text" class="in-pw" name="password" placeholder="输入密码" id="pw"/>');
        $("#pw").attr("value",temp);
    }else{
        $("#sp").html('<input type="password" class="in-pw" name="password" placeholder="输入密码" id="pw"/>');
        $("#pw").attr("value",temp);
    }
    
}

$(function() {
    if(${validType==2}){
        $("#title").html("首次使用，重置密码");
        $("#button").html("保存密码");
        $("#account").attr("readonly","readonly"); 
        $("#password").show();
    }else if(${validType==3 }){
        $("#title").html("账号未验证，请重新激活");
        $("#button").html("激活账号");
        $("#account").attr("readonly","readonly"); 
        $("#password").hide();
    }else if(${validType==4}){
        $("#title").html("重置密码");
        $("#button").html("保存密码");
        $("#password").show();
    }
    
    //设置验证信息
    try{
        nengLongValidateSetting({
            rules:{
                account:{
                    required:true,
                    digits:true,    // 必须输入整数
                    rangelength:[11, 11],
                    remote:{
                        url:'${basePath}/rrt/user/accountExists',
                        type:'POST',
                        data:{"validType":"${validType }"}
                    }
                },
                password:{
                    required:true,
                    rangelength:[6, 32]
                },
                validateNum:{
                    required:true
                }
            },
            messages:{
                account:{
                    required:"",
                    digits:"账号只能为数字",
                    rangelength:"账号长度11个字符",
                    remote:"账号不存在"
                },
                password:{
                    required:"",
                    rangelength:"密码长度6~32个字符"
                },
                validateNum:{
                    required:""
                }
            },
            errorPlacement:function(error, element) {
                $("#errorMessage").html(error);
            }
        }, "validateForm", false);
        <c:if test="${errorMessage！=null }">
            $("#validateForm").validate().showErrors({"account":"${errorMessage}"});
        </c:if>
    }catch(ex){
    }    
});
</script>

控制层错误信息和账号回送到该页面后，虽然127行代码被执行，页面也能显示${errorMessage}的数据，但瞬间会调用89行中地址中的方法，使得该${errorMessage}错误信息给覆盖

validate.jsp页面表单代码

<section class="main clearfix">
<form action="${basePath }/rrt/user/validate.do" id="validateForm" method="POST" autocomplete="off">
<input type="hidden" value="${validType }" name="validType" id="validType" />
    <div class="name"><input type="text" class="in-name" value="${account.account }" name="account" id="account" placeholder='输入账号' maxlength="11"/></div>
    <div class="password" id="password" style="display:none">
        <span id="sp" class="mysp">
            <input type="password" class="in-pw" value="" name="password" id="pw" placeholder='输入密码'/>
        </span>
        <a href="#" id="showPassword" οnclick="showPassword();return false"></a>
    </div>
    <div class="num">
        <input type="text" class="in-num" name="validateNum" id="validateNum" value="" placeholder='验证码' maxlength="6"/>
        <input class="btn" id="btnSendCode" type="button" value="发送验证码" οnclick="getCodeVerify()" />
    </div>
    <div id="errorMessage" class="errorMessage"></div>
    <div><a href="#" οnclick="nengLongSubmitForm('validateForm');return false" class="sub" id="button">激活账号</a></div>
</form>
</section>

控制层保存密码方法：

    @RequestMapping("/validate")
    @ResponseBody
    public ModelAndView validate(UserAccount userAccount, String validateNum, Integer validType){
        ModelAndView mav = new ModelAndView();
        TimedSystemSetting systemSetting = SystemSettingFactory.getInstance();
        String oneminiTime = systemSetting.getSettings().get("oneminiTime");
        try {
            // 判断验证码是否正确
            boolean isValidate = smsCodeVerifyServiceImpl.validate(userAccount.getAccount(), validateNum, validType);
            if(isValidate){
                //更新用户状态
                UserAccount bean = accountServiceImpl.findAccount(userAccount);
                String newPassword = userAccount.getPassword();
                if((validType==2 || validType==4) && newPassword!=null){
                    bean.setPassword(StringUtils.trim(AES.encoder(newPassword)));
                }
                bean.setState(1);
                accountServiceImpl.updateUserAccount(bean);
                mav.addObject("account", bean.getAccount());
                mav.setViewName("user/login");
            }else{
                mav.addObject("count", oneminiTime);    // 验证码发送间隔时间
                mav.addObject("errorMessage", "验证码错误");
                mav.addObject("validType", validType);
                mav.addObject("account", userAccount);
                mav.setViewName("user/validate");
            }
        } catch (Exception e) {
            mav.addObject("count", oneminiTime);    // 验证码发送间隔时间
            mav.addObject("errorMessage", "验证码错误");
            mav.addObject("account", userAccount);
            mav.addObject("validType", validType);
            mav.setViewName("user/validate");
            e.printStackTrace();
        }
        return mav;
    }