使用 Jquery 验证插件设置自定义验证规则？

Question

我正在尝试为表单设置一些自定义规则并使用上述Jquery Validation Plugin，但我真的不知道要修改给出的示例以完成我想做的事情。

我想要做的是设置一个条件，其中在“国家”输入中选择的选项会更改验证电话号码文本输入所需的位数。在我的示例中，我尝试设置如果所选国家/地区是加拿大，则电话输入中所需的位数为 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 函数中更改。我接受任何可以改进此逻辑以使其正常工作的想法，但除此之外，任何人都可以帮助我了解如何revise one of these examples into doing what I want instead?

Answer 1

您可以使用$('$input').rules('add', options)作为插件documentation

这是你的代码..

<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);
  });