jQuery Validate - 只允许填充两个四个字段 - 如何验证?

时间:2011-10-10 07:31:59

标签: javascript jquery html forms validation

我有四个输入字段:

MaxWidth
MaxHeight

Width
Height

我想验证是否只输入了MaxWidth + MaxHeightWidth + Height。用户不应该为两个集提交值。

有什么想法吗?


更新

我正在使用.NET MVC3默认应用程序提供的jquery.validate.min.js

这是我基本上需要验证

    <-- Scale a picture to one of the max attributes and keeping the aspect ratio --/>
    <input type="text" name="cmdMaxWidth" /><br />
    <input type="text" name="cmdMaxHeight" /><br />
    <br />
    <-- Scale a picture to the exact width and height attributes, still keeping the aspect ratio but addting whitespace for the rest --/>
    <input type="text" name="cmdWidth" /><br />
    <input type="text" name="cmdHeight" /><br />

更新

我已经重写了我的表单,以反映Mohen在他的答案命令中描述的UI / UX设置。

但我会以“接受”的答案奖励Jayendra Patil,但我会“标记”Mohens的答案和建议

亲切的问候 \ t

2 个答案:

答案 0 :(得分:1)

当获得一个值时,您可以轻松禁用其他输入。

例如,您有两个输入:

 <input id="width" placeholder="width"/>
  <input id="maxwidth" placeholder="max width"/>

并且您希望在用户输入宽度时不允许输入maxwidth。然后你可以这样做:

$('#width').change(function(){
  if($(this).val() != ''){
    $('#maxwidth').attr('disabled', 'disabled');
  }
});

对于宽度和最大宽度,你可以做同样的事情

JsBin File

答案 1 :(得分:0)

您也可以尝试使用依赖性验证 添加一个检查其他两个字段的方法 并使所需的依赖于其他领域。

演示 - http://jsfiddle.net/b3RmV/

cmdMaxWidth字段的示例(ids硬编码,您可以作为参数传递) -

jQuery.validator.addMethod("allowed", function(value, element) {
    return !($('#cmdWidth').val().length > 0 || $('#cmdHeight').val().length > 0)

}, "Not allowed");

$(document).ready(function(){
    $("#commentForm").validate(
        {   rules: {     
                cmdMaxWidth: {       
                    required:  function(element){
                      return $('#cmdMaxHeight').val().length > 0;
                    },
                    allowed: true
                }   
            }
        }
    );
});