使用Jquery驗證插件設置自定義驗證規則？

Question

我正在嘗試為表單設置一些自定義規則，並且正在使用上述的Jquery Validation插件 ，但是我真的不知道要修改給出的示例來完成我想做的事情。

我要做的是設置一個條件，其中在“國家/地區”輸入中選擇的選項會更改驗證電話號碼文本輸入所需的所需位數。 在我的示例中，我嘗試設置以下內容：如果所選國家/地區為加拿大，則電話輸入中要求的位數為10，否則為12。

在我注意到addMethod的文檔之前，我曾嘗試像這樣的小樣本形式插入自定義條件語句。

<form id='myform'>
        <select name="country" placeholder="country" id="country">
                <option value="">Select a country</option>
                <option value="Canada">Canada</option>
                <option value="Elsewhere">Elsewhere</option>
        </select>
        <input type="text" name="phonenumber" id="phonenumber" placeholder="Phone Number">
        <input type="submit" name="submit" id="submit">
    </form>
<script>
$phoneDigits = 10;      

$('#country').change(function(){
    if($('#country').val() == 'Elsewhere'){
        $phoneDigits = 12;
    }else{
        $phoneDigits = 10;
    }
});

    $("#myform").validate(
  {
    rules: 
    {
      fullname: 
      {
        required: true
      },
      email: 
      {
        required: true,
        email: true
      },
        country: 
      {
        required: true,
      },
        phonenumber: 
      {
        required: true,
        minlength: $phoneDigits
      }
    },
    messages: 
    {
      fullname: 
      {
        required: "Please enter your name"
      },
      email: 
      {
        required: "Please enter your email address."
      },
     country: 
      {
        required: "Please select a country."
      },
    phonenumber: 
      {
        required: "Please enter your phone number."
      }
    }
  }); 
</script>    

這幾乎可以工作，但是$ phoneDigits變量在validate函數內不會更改。 我接受任何可以改進此邏輯以使其起作用的想法，但是否則，任何人都可以幫助我找出如何修改這些示例之一以執行我想要的工作嗎？

Answer 1

您可以使用$('$input').rules('add', options)作為插件文檔

這是您的代碼。

<form id='myform'>
    <select name="country" placeholder="country" id="country">
            <option value="">Select a country</option>
            <option value="Canada">Canada</option>
            <option value="Elsewhere">Elsewhere</option>
    </select>
    <input type="text" name="phonenumber" id="phonenumber" placeholder="Phone Number">
    <input type="submit" name="submit" id="submit">
</form>

 $("#myform").validate(
 {
    rules: 
    {
      fullname: 
      {
        required: true
      },
      email: 
      {
        required: true,
        email: true
      },
      country: 
      {
        required: true,
      },
      phonenumber: 
      {
        required: true
      }
 },
 messages: 
 {
    fullname: 
    {
        required: "Please enter your name"
    },
    email: 
    {
        required: "Please enter your email address."
    },
    country: 
    {
        required: "Please select a country."
    },
    phonenumber: 
    {
        required: "Please enter your phone number."
    }
 }
   }); 
   var obj = {minlength: 0,
    messages: {
      minlength: '')
    }
  };
  $('#country').change(function(){
    if($('#country').val() == 'Elsewhere'){
        obj.minlength = 12;
        obj.messages.minlength = 'Required at least 12 digit';
    }else{
        obj.minlength = 10;
        obj.messages.minlength = 'Required at least 10 digit';
    }
  // And lastly...
  $( "#phonenumber" ).rules( "add", obj);
  });