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" /> 

SCRIPT

$("#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')處理程序到select元件結合the plugin's .rules() methods。

  $('#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/