jquery 验证条件 IF

Question

如何实现以下目标？对于同一字段，根据下拉值进行不同的范围验证。

谢谢

如果从下拉列表中选择蓝色，则值字段的范围应为 200-300，如果为红色，则范围应为 0-100

HTML

<select name="color" id="Color">
<option value="orange" select="selected">orange</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
<input type="text" id="value" />

脚本

$("#myform").validate({
  rules: {
    value: {
      required: true,
        if ($('#color').val() == "red"){
      range: [0, 100]
    }
      if ($('#color').val() == "blue"){
      range: [200, 300]
    }
  }
}); 

Answer 1

• 您需要使用此插件验证的任何字段必须包含name属性。

  <input type="text" id="value" name="value" />
  

• 将 .on('change') 处理程序与 the plugin's .rules() methods 一起附加到 select 元素.

  $('#color').on('change', function() {
      if ($(this).val() == "blue") {
          $('#value').rules('add', {
              range: [200,300]
          })
      } else if ($(this).val() == "red") {
          $('#value').rules('add', {
              range: [0,100]
          })
      } else {
          $('#value').rules('remove');
      }
  });
  

• 在 .validate() 中声明 required 规则，以避免上述 .rules() 方法的干扰。

  $("#myform").validate({
      rules: {
          value: {  // <-- this refers to the "name" attribute
              required: true
          }
      }
  });
  

工作演示:http://jsfiddle.net/3796X/