如何使用jquery验证器来确定一个字段的值大于另一个字段?

时间:2015-04-04 21:19:11

标签: javascript jquery

我在表单中有两个字段,我想为他们添加一条规则 id2的值不能小于id1

 <input type="text" id="id1">
 <input type="text" id="id2">


id1 : {
                number: true,
                min: 0
            }, 
id2 : {
                number: true,
                min: 0
            } 

有没有办法为jquery验证器设置规则?

2 个答案:

答案 0 :(得分:9)

添加自定义方法:

$.validator.addMethod("greaterThan",
    function (value, element, param) {
          var $otherElement = $(param);
          return parseInt(value, 10) > parseInt($otherElement.val(), 10);
    });
);

上面的代码假设您使用的是整数。如果没有,请将parseInt替换为parseFloat

然后在配置中使用它:

id2: {
    number: true,
    min: 0,
    greaterThan: "#id1"
}

答案 1 :(得分:3)

您可以使用以下命令获得jQuery所需的行为:

HTML

 <input type="text" id="id1">
 <input type="text" id="id2">
 <input type="submit" id="submit">
 <div class="error" style="display:none">id2 cannot have value less than id1<div>

<强>的jQuery

$("#id2").focusout(function(){

    if(parseFloat($("#id1").val()) > parseFloat($("#id2").val()))
    {
        $(".error").css("display","block").css("color","red");
        $("#submit").prop('disabled',true);
    }
    else {
        $(".error").css("display","none");
        $("#submit").prop('disabled',false);        
    }

});

见jfiddle:http://jsfiddle.net/fyrgazfg/