jquery - jQuery 验证 URL 或文件

Question

我正在使用 jQuery 验证插件 ( http://docs.jquery.com/Plugins/Validation/ )，我需要制作一个表格。

UPLOAD: <input type="file" name="image"  /><br>
URL: <input type="text" name="images">

我如何才能使这些字段中的至少一个必须填写（即class="required"）？

Answer 1

您正在寻找的是 jQuery Validate 中的依赖表达式。如果您的表单看起来像您显示的内容（即 2 个输入，一个名为image另一个名为images），您可以这样做：

$('form').validate({
    rules: {
       image: {
          required: 'input[name="images"]:blank'
       },
       images: {
          required: 'input[name="image"]:blank'
       }
    }
});

所以发生的情况是，当它去验证每个表单字段时，它会检查给定的表达式，如果它返回 true，那么当前的表单字段是必需的。如果是假的，那就不是。

Answer 2

这可能行得通还没有测试出来只是写得很快就可以帮助你

$(function() {
    $("input").focusout(function (){
        $('input').each(function(){
            $(this).addClass('required');
            if($(this).val()){
                $(this).removeClass('required');
            }
        });
    });
}); 

这是一个小提琴：

Answer 3

我通常为这些东西添加自定义方法。尝试这样的事情。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <style>
        .error {color: red}
    </style>

    <form id="testForm" enctype="multipart/form-data">

        <input name="image" class="oneof" />
        <br /><input name="images" type="file" class="oneof" />
        <br /><input type="submit" />
    </form>


    <script>
        // using custom methods
        $(document).ready(function(){
            jQuery.validator.addMethod("oneofelementsrequired", function(value, element, param) {
                element = element || false; 
                var $frm=$(element).parents('form:first'),
                    any=false, 
                    $ctrls=$frm.find( param );

                $ctrls.each( function(){
                    any = any || this.value != ''
                });
              return any; 
            }, "Please fill one of this fields");

            jQuery.validator.addClassRules({
                oneof: {oneofelementsrequired: '.oneof'}
            });

            $('#testForm').validate({
                submitHandler: function(){
                    alert('From is Ok');
                    return false;
                }
            });


        });

    </script>

演示