Question

我正在使用jQuery验证插件（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）

我有以下结构：

<select name="s1" id="s1">
   <option value="url">url</option>
   <option value="normal">normal</option>
</select>
<input name="s1_value" id="s1_value" type="text" />

现在，我需要验证规则（使用jQuery验证插件）

如果我在列表框中选择“url”作为值，则输入字段应仅包含有效的URL

如果我在列表框中选择'normal'作为值，则输入字段可以包含任何文本

对于任何选择，输入字段的值不应为空

怎么做？

Answer 1

我认为最简单的解决方案可能就是使用http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules规则（“添加”，规则）函数来添加和规则（“删除”，规则）以根据该选择的选择值删除规则。

$("select").change(function(){
  if(this.value == "url") {
    $("input").rules("add",{
      url: true
    })
  }
  if(this.value == "normal") {
    $("input").rules("remove", "url")
  }
})

Answer 2

验证插件允许在每个元素的类中指定规则。您可以从required和url规则开始：

<input name="s1_value" id="s1_value" type="text" class="required url" />

如果列表框值变为url，您可以从那里删除normal类：

$("#s1").change(function() {
    if ($(this).val() == "url") {
        $("#s1_value").addClass("url");
    } else {
        $("#s1_value").removeClass("url");
    }
});

这样，验证插件不会针对url规则验证字段，因为它不会在其类中公开该规则。

您可以测试此解决方案here。

Answer 3

您可以将change事件连接到选择输入：

jQuery("#s1").change(function(){
   var val = jQuery(this).val();
   ...
});

然后在该函数中，使用验证插件中的add and remove functions根据需要调整规则。

根据列表框值更改输入值的验证

3 个答案: