使用jQuery Validate相关问题

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;
    }


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值