代码之家 › 专栏 › 技术社区 › user1032531

jQuery Validate require\u from\u group并按名称选择

jquery-validate css-selectors forms jquery

user1032531 · 技术社区 · 7 年前

如jqueryvalidation中所示 require_from_group-method 例如,可以使用类来选择组。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

我还发现可以通过ID进行选择。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    home_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    },
    work_phone: {
      require_from_group: [1, "#mobile_phone, #home_phone, #work_phone"]
    }
  }
});

是否可以按名称选择?以下两次尝试将导致错误。

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    home_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    },
    work_phone: {
      require_from_group: [1, "[name: mobile_phone], [name: home_phone], [name: work_phone]"]
    }
  }
});

$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    home_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    },
    work_phone: {
      require_from_group: [1, "[name: 'mobile_phone'], [name: 'home_phone'], [name: 'work_phone']"]
    }
  }
});

1 回复 | 直到 7 年前

Bourbia Brahim 7 年前

attrib选择器可用于 = 非dot : 因此,您应该只更换 : 通过 =

请参见以下代码段:

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "mobile_phone": {
                require_from_group: [1, "[name= mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "home_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            },
            "work_phone": {
                require_from_group: [1, "[name=mobile_phone], [name=home_phone], [name=work_phone]"]
            }
        },submitHandler: function (form) { // for demo
            if($(form).valid() ) alert("form valide");
            return false;  //form.submit();
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">


    <label for="name">mobile phone :</label>
    <input class="phone-group" type="text" name="mobile_phone" id="mobile_phone" /><br><br>
    
    
    <label for="name">home phone :</label>
    <input class="phone-group" type="text" name="home_phone" id="home_phone" /><br><br>
    
    
    <label for="name">work phone :</label>
    <input class="phone-group" type="text" name="work_phone" id="work_phone" /><br><br>
    <button type="submit">Submit</button>
</form>