文档章节

jQuery Validate相关问题

Gtwo
 Gtwo
发布于 2015/10/30 13:41
字数 1188
阅读 34
收藏 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" onclick="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="发送验证码" onclick="getCodeVerify()" />
    </div>
    <div id="errorMessage" class="errorMessage"></div>
    <div><a href="#" onclick="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;
    }


© 著作权归作者所有

共有 人打赏支持
Gtwo
粉丝 1
博文 42
码字总数 35045
作品 0
中山
程序员
私信 提问
如何结合Jquery 的validate 和 ajax submit进行工作.

我刚接触Jquery,需要修改公司的重做公司的一个系统,准备用Jquery做JS框架,遇到一个问题. 我们知道Jquery 的jquery.validate.js的这个函数可以帮我做表单的验证,用于帮定错误信息到各个属性,...

wjyy
2013/05/23
13K
6
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
109.7K
18
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
8 个高可用的 jQuery 表单验证插件

1) A Jquery Inline Form Validation 2) Jquery Contact Form validation 3) Form Validation Using Jquery 4) Using Jquery and Ajax to validate Form 5) How to Validate Forms in both s......

红薯
2011/12/19
3.1K
8
jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis之父表示ARM服务器没戏!

ARM表示Neoverse N1平台和E1 CPU即将发布,Neoverse N1和E1采用7nm制程,并且为服务器和通信设备增加重要提升,拥有高可扩展性、高处理量以及高性能,将分别在2020年和2021年投入使用。 与C...

linuxCool
18分钟前
2
0
YARN 内存参数终极详解

YARN环境中应用程序JAR包冲突问题的分析及解决 Hadoop框架自身集成了很多第三方的JAR包库。Hadoop框架自身启动或者在运行用户的MapReduce等应用程序时,会优先查找Hadoop预置的JAR包。这样的...

stys35
23分钟前
0
0
Mybatis常用总结一

这一节的学习强烈建议实际操作 主键自增和自定义主键 实现描述:我们在写程序时,时常会遇到这样的问题:插入一条数据,但因有主键的存在,而有时候会报“违反唯一性约束”的错误,我们可以使...

大笨象会跳舞吧
24分钟前
0
0
计数二进制子串

leetcode:https://leetcode.com/problems/count-binary-substrings/ 给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起...

woshixin
26分钟前
0
0
mysql utf8mb4字符集,存储emoji表情

字符集utf8mb4 utf8mb4兼容utf8,且比utf8能表示更多的字符。 看unicode编码区 从1 ~ 126就属于传统utf8区,当然utf8mb4也兼容这个区,126行以下就是utf8mb4扩充区,什么时候你需要存储那些...

我心中有猛狗
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部