jquery驗證郵政編碼的規則

Question

我得到了以下代碼部分工作。我需要驗證加拿大郵政，如果國家是加拿大pay_id_1 == 1或美國郵政編碼，如果pay_id_1 == 234。

var validator = $form.validate({ 
    ignore: ".ignore,:hidden:not(input[type='hidden'])", 
    rules: { 
     par_prenom_1: { 
      required: true 
     }, 
     par_nom_1: { 
      required: true 
     }, 
     par_adresse_1: { 
      required: true 
     }, 
     par_ville_1: { 
      required: true 
     }, 
     pro_id_1: { 
      required: true 
     }, 
     pay_id_1: { 
      required: true 
     }, 
     par_codepostal_1: { 
      required: true, 
      postalCodeCA: function() { 
       if ($("#pay_id_1").val() === 1) { 
        return true 
       } else { 
        return false 
       } 
      }, 
      zipcodeUS: function() { 
       if ($("#pay_id_1").val() === 234) { 
        return true 
       } else { 
        return false 
       } 
      } 
     }, 
     par_telephone1_1: { 
      required: true 
     }, 
     par_courriel_1: { 
      required: true, 
      email: true 
     }, 
     par_naissance_1: { 
      required: true, 
      dateCA: true, 
      daterange: ["1917-09-04", "2001-09-03"] 
     }, 
     par_sexe_1: { 
      required: true 
     }, 
     que_2580_1: { 
      required: true 
     }, 
     que_2581_1: { 
      required: true 
     }, 
     que_2582_1: { 
      required: true 
     }, 
     que_2583_1: { 
      required: true 
     } 
    }, 
    messages: { 
     par_prenom_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     par_nom_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     par_adresse_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     par_ville_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     pro_id_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     pay_id_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     par_codepostal_1: { 
      required: "Veuillez entrer le code postal/zip", 
      postalCodeCA: "Veuillez entrer un code postal/zip valide" 
     }, 
     par_telephone1_1: { 
      required: "Veuillez entrer le numéro de téléphone", 
      phoneUS: "Le numéro de téléphone doit être sous le format 555-555-5555" 
     }, 
     par_courriel_1: { 
      required: "Veuillez entrer le courriel", 
      email: "Le courriel doit être une adresse valide" 
     }, 
     par_naissance_1: { 
      required: "Veuillez entrer la date de naissance", 
      dateCA: "La date de naissance doit être sous le format AAAA-MM-JJ", 
      daterange: "La date de naissance doit être entre {0} et {1}" 
     }, 
     par_sexe_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     que_2580_1: { 
      required: "Veuillez faire un choix" 
     }, 
     que_2581_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     que_2582_1: { 
      required: "Veuillez entrer une valeur" 
     }, 
     que_2583_1: { 
      required: "Veuillez entrer une valeur" 
     } 
    } 
}); 

問題是這兩個規則適用於任何國家。你能看到我不能？

Answer 1

您需要利用.rules()方法來動態更改字段上的規則。

您可以使用click和focus事件觸發該功能。使用.validate()方法中的rules對象來設置任何初始默認規則。

此外，正如在另一個答案中所述，您需要使用引號，因爲該字段的值是一個字符串。

$('[name="par_codepostal_1"]').on('click focus', function() { 
    if ($("#pay_id_1").val() === '1') { 
     $(this).rules('add', { 
      postalCodeCA: true, 
      zipcodeUS: false 
     }); 
    } else if ($("#pay_id_1").val() === '234') { 
     $(this).rules('add', { 
      postalCodeCA: false, 
      zipcodeUS: true 
     }); 
    } else { 
     // whatever 
    } 
}); 

DEMO：jsfiddle.net/rb3fetuk/

或者，您可以觸發規則的變化，當你blur遠離pay_id_1領域。

$('#pay_id_1').on('blur', function() { 
    if ($(this).val() === '1') { 
     $('[name="par_codepostal_1"]').rules('add', { 
      postalCodeCA: true, 
      zipcodeUS: false 
     }); 
    } else if ($(this).val() === '234') { 
     $('[name="par_codepostal_1"]').rules('add', { 
      postalCodeCA: false, 
      zipcodeUS: true 
     }); 
    } else { 
     // whatever 
    } 
}); 

DEMO：jsfiddle.net/rb3fetuk/1/