JQuery 意大利财政代码和增值税号的验证条件

Question

我正在为我的注册表单使用 Jquery 验证插件。如果填写了公司字段，则用户应仅输入意大利增值税号，否则应填写 CF 字段。 同时我也想检查输入的字段是否正确。 我的代码是错误的，因为 PI 和 CF 始终是必需的...正确的代码是什么？

$.validator.addMethod("CodFisc", function(value) {
  var CFControl = /[A-Za-z]{6}[0-9lmnpqrstuvLMNPQRSTUV]{2}[abcdehlmprstABCDEHLMPRST]{1}[0-9lmnpqrstuvLMNPQRSTUV]{2}[A-Za-z]{1}[0-9lmnpqrstuvLMNPQRSTUV]{3}[A-Za-z]{1}/;
  return value.match(CFControl);
}, "Enter a correct fiscal code");

$.validator.addMethod("PIva", function(value) {
  var PiControl = /[0-9]{11}/;
  return value.match(PiControl);
}, "Enter a correct VAT number");

$("form#adminForm.form-validate").validate({
  errorClass: 'msgError',
  rules: {
    PI: {
      required: {
        depends: function(element) {
          if ($('#company_field').val() != "") {
            return true;
          } else {
            return false;
          }
        }
      },
      PIva: true
    },
    CF: {
      required: {
        depends: function(element) {
          if ($('#company_field').val() == "") {
            return true;
          } else {
            return false;
          }
        }
      },
      CodFisc: true
    }
  },
  messages: {
    PI: {
      required: 'Enter a VAT number'
    },
    CF: {
      required: 'Enter a Fiscal Code'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js" ></script>


<form method="post" id="adminForm" name="userForm" action="#" class="form-validate">
  <label class="company" for="company_field">Company</label><input type="text" id="company_field" name="company" size="30" value="" maxlength="64" /><br/>
  <label class="first_name" for="first_name_field">Name *</label><input type="text" id="first_name_field" name="first_name" size="30" value="" class="required" maxlength="32" /><br/>
  <label class="PI" for="PI_field">VAT</label><input type="text" id="PI_field" name="PI" size="50" value="" maxlength="14" /><br/>
  <label class="CF" for="CF_field">Fiscal Code</label><input type="text" id="CF_field" name="CF" size="0" value="" maxlength="16" /><br/>
  <button class="button" type="submit">Register</button>
  </form>

Answer 1

更改了正则表达式以确保测试整个值

1. 如果触发规则，则添加红色星号（公司 => 增值税，无公司 => CF）

$(document).ready(function() {
  $.validator.addMethod("PIva", function(value, element) {
    var PiControl = /^[0-9]{11}$/;
    return this.optional(element) || value.match(PiControl);
  }, "Please enter a correct VAT number.");

  $.validator.addMethod("CodFisc", function(value, element) {
    var CFControl = /^[A-Za-z]{6}[0-9LMNPQRSTUV]{2}[ABCDEHLMPRST]{1}[0-9LMNPQRSTUV]{2}[A-Za-z]{1}[0-9LMNPQRSTUV]{3}[A-Za-z]{1}$/;
    return this.optional(element) || value.match(CFControl);
  }, "Please enter a correct fiscal code.");

  $("#adminForm").validate({
    errorClass: 'msgError',
    rules: {
      company: {
        required: function() {
          return $("#PI_field").val() !== "";
        }
      },
      PI: {
        required: function() {
          return $("#company_field").val() !== "";
        },
        PIva: true
      },
      CF: {
        required: function() {
          return $("#company_field").val() === "" && $("#PI_field").val() === "";
        },
        CodFisc: true
      },
      first_name: {
        required: true // Assuming 'Name' is always required as per your form setup
      }
    },
    messages: {
      company: {
        required: "Company name is required since VAT number is entered."
      },
      PI: {
        required: "VAT number is required if a company name is entered."
      },
      CF: {
        required: "Fiscal Code is required when neither VAT number nor company name is provided."
      },
      first_name: {
        required: "Please enter your name."
      }
    }
  });

  // Function to dynamically update required attribute and add asterisks
  function updateRequirements() {
    $(".label-asterisk").remove(); // Remove all asterisks first

    if ($("#company_field").val() !== "") {
      $("#PI_field").attr("required", "required");
      $("label[for='PI_field']").append('<span class="label-asterisk">*</span>');
    } else {
      $("#PI_field").removeAttr("required");
    }

    if ($("#PI_field").val() !== "" || $("#company_field").val() !== "") {
      $("#CF_field").removeAttr("required");
    } else {
      $("#CF_field").attr("required", "required");
      $("label[for='CF_field']").append('<span class="label-asterisk">*</span>');
    }
  }

  // Bind keyup and change events to update requirements and asterisks
  $("#company_field, #PI_field").on("keyup change", updateRequirements);

  // Initial check on page load
  updateRequirements();
});

.label-asterisk {
  color: red;
  margin-left: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"></script>


<form method="post" id="adminForm" name="userForm" action="#" class="form-validate">
  <label class="company" for="company_field">Company</label> <input type="text" id="company_field" name="company" size="30" value="" maxlength="64" /><br/>
  <label class="first_name" for="first_name_field">Name *</label><input type="text" id="first_name_field" name="first_name" size="30" value="" class="required" maxlength="32" /><br/>
  <label class="PI" for="PI_field">VAT</label> <input type="text" id="PI_field" name="PI" size="50" value="" maxlength="14" /><br/>
  <label class="CF" for="CF_field">Fiscal Code</label> <input type="text" id="CF_field" name="CF" size="0" value="" maxlength="16" /><br/>
  <button class="button" type="submit">Register</button>
</form>