Question

我有四个输入字段：

MaxWidth
MaxHeight

和

Width
Height

我想验证是否只输入了MaxWidth + MaxHeight或Width + 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

Answer 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

Answer 2

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

演示 - 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
                }   
            }
        }
    );
});

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

2 个答案: