jQuery点击保存按钮时如何一次性校验所有邮政编码起止输入值大小

云原生阿岚

2026-9-24

多行邮政编码起止值校验实现方案

问题原因

原有代码直接通过类选择器$('.zip-first').val()获取值时，jQuery默认只会返回第一个匹配元素的取值，因此仅能校验第一行的邮编数据。

解决思路

遍历所有<tr>行，逐行获取当前行内的起始、结束邮编输入值做校验，分别标记不通过的行。

优化后代码

$(".zip-save").on('click', function(e) {
  e.preventDefault();
  var isFormValid = true;
  // 清空上一次校验的错误提示和异常边框样式
  $('.zip-error').remove();
  $('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');

  // 遍历每一行tr做校验
  $('tr').each(function() {
    const $currentRow = $(this);
    const zipStart = Number($currentRow.find('.zip-first').val());
    const zipEnd = Number($currentRow.find('.zip-last').val());
    
    // 两个值都非空时才做大小校验，如需必填校验可自行补充空值判断逻辑
    if (zipStart && zipEnd && zipStart > zipEnd) {
      isFormValid = false;
      // 仅标记当前行的结束邮编输入框
      $currentRow.find('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
      // 插入错误提示，加自定义类方便后续统一清理
      $currentRow.after('<p class="zip-error" style="color:#da473a; margin: 4px 0;">zip-to value must be greater than zip-from</p>');
    }
  });

  // 所有行校验通过后执行后续逻辑
  if (isFormValid) {
    // 此处补充表单提交、数据上传等后续业务代码
    console.log('所有行校验通过');
  }
});