jQuery日期正则验证失效求助：空值校验正常但格式校验无效

我看了你的代码，很快就找到了几个导致正则校验失效的关键问题，咱们一步步来修复：

问题1：正则表达式定义错误 #

你把正则表达式用字符串包裹起来了：

var pattern = '/^([0-9]{1,2})\\/([0-9]{1,2})\\/([0-9]{4})$/';

这本质上只是个普通字符串，不是能用来做格式校验的正则对象。正确的写法是去掉引号，使用正则字面量（不需要双重转义斜杠）：

var pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;

问题2：校验逻辑完全错误 #

你用date != pattern来判断日期格式，这是在把输入的日期字符串和正则的字符串形式做字面比较，完全不是正则校验的正确用法。应该用正则对象的test()方法来检查输入字符串是否匹配格式：

!pattern.test(date)

问题3：整体逻辑判断有误 #

原代码里的flag设置逻辑存在偏差：只要有一个字段不满足条件就把flag设为true，但最终返回的flag和按钮禁用状态的对应关系需要调整。我们需要的逻辑是：只要有任何一个字段不合法（姓名为空 或 日期格式错误），就禁用按钮，反之则启用。

修正后的完整代码 #

下面是修复后的所有代码，我还添加了一些细节优化：

function checkStatus() { 
  // 默认假设所有字段都合法，不需要禁用按钮
  var isValid = true; 
  var pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 
  
  $('.name-field').each(function() { 
    var name = $(this).find('input[name="firstname[]"]').val().trim(); 
    var date = $(this).find('input[name="date[]"]').val().trim(); 
    
    // 如果姓名为空 或者 日期格式不匹配，标记为不合法
    if (name === "" || !pattern.test(date)) { 
      isValid = false;
      // 找到不合法字段后直接跳出循环，提升性能
      return false;
    } 
  }); 
  
  // 返回是否需要禁用按钮：字段不合法时返回true，触发禁用
  return !isValid;
} 

//Toggle disabled class 
$('.name-field').on('keyup', 'input', function() { 
  $('#stepname').toggleClass('disabled', checkStatus()); 
}); 

.disabled { 
  cursor: not-allowed; 
  pointer-events: none; 
  background-color: #ccc; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="name-field" class="name-field row"> 
  <div class="col-xs-12 col-sm-6 childname"> 
    <div class="field text-left"> 
      <label class="text-left">Name</label> 
      <input class="firstname" name="firstname[]" type="text" /> 
    </div> 
  </div> 
  <div class="col-xs-12 col-sm-6 dateofbirth"> 
    <div class="field text-left"> 
      <label class="text-left">Date of birth</label> 
      <input type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" /> 
    </div> 
  </div> 
</div> 
<a href="#" id="stepname" class="btn disabled">Next step</a>

额外优化建议 #

• 加入trim()处理输入内容，避免用户输入空格导致的误判
• 如果需要更严格的日期校验（比如月份不超过12、日期符合对应月份天数），可以在正则校验通过后，拆分日/月/年并创建Date对象做进一步验证。

内容的提问来源于stack exchange，提问作者Zain