自定义Parsley验证：实现电话或邮箱至少填写其一

嘿，我来帮你搞定这个Parsley验证的需求！要实现电话和邮箱至少填一项，咱们有两种实用的方案，看你更倾向哪种：

方案一：自定义验证规则（灵活适配复杂场景） #

这种方式适合后续可能需要扩展验证逻辑的情况，步骤很简单：

1. 先给外层的容器加个唯一标识，方便我们定位这个表单组：

<div class="row" id="contact-group">
  <div class="col-xs-6">
    <input type="tel" class="form-control" id="tel" name="tel" placeholder="Guest Phone" data-mask="999-999-9999">
  </div>
  <div class="col-xs-6">
    <input type="email" class="form-control" id="email" name="email" data-parsley-trigger="focusout change" placeholder="Guest Email">
  </div>
</div>

2. 编写Parsley自定义验证方法，检查两个输入框是否至少有一个不为空：

// 注册自定义验证规则
window.Parsley.addValidator('atLeastOneContact', {
  validateString: function(_value, _requirements, instance) {
    // 获取当前组下的电话和邮箱输入框内容
    const telInput = instance.$element.find('#tel').val().trim();
    const emailInput = instance.$element.find('#email').val().trim();
    // 只要其中一个有内容就返回验证通过
    return telInput !== '' || emailInput !== '';
  },
  messages: {
    en: 'Please enter either a phone number or email address',
    // 可以根据需求添加其他语言的提示文案
  }
});

// 给容器绑定这个验证规则，并设置错误提示位置
$('#contact-group').parsley({
  errorsContainer: function(parsleyField) {
    return parsleyField.$element.closest('.row');
  }
}).addConstraint('atLeastOneContact', true);

方案二：纯HTML属性实现（无需额外JS） #

如果不想写太多JavaScript，咱们可以利用Parsley的data-parsley-required-if属性，通过反向条件实现：

修改你的HTML代码如下：

<div class="row">
  <div class="col-xs-6">
    <input type="tel" class="form-control" id="tel" name="tel" placeholder="Guest Phone" data-mask="999-999-9999"
      data-parsley-required-if="#email:blank"
      data-parsley-validate-if-empty
      data-parsley-error-message="Please enter either phone or email">
  </div>
  <div class="col-xs-6">
    <input type="email" class="form-control" id="email" name="email" data-parsley-trigger="focusout change" placeholder="Guest Email"
      data-parsley-required-if="#tel:blank"
      data-parsley-validate-if-empty
      data-parsley-error-message="Please enter either phone or email">
  </div>
</div>

关键属性解释： #

• data-parsley-required-if="#email:blank"：意思是当邮箱为空时，电话必须填写，反过来给邮箱加的规则同理
• data-parsley-validate-if-empty：确保输入框为空时也会触发验证（默认Parsley不会验证空输入）
• data-parsley-error-message：自定义错误提示文案，让用户清楚知道要填至少一项

两种方案都能实现需求，你可以根据自己的项目情况选择：如果需要更复杂的验证逻辑（比如还要同时检查格式+满足至少一项），方案一更合适；如果追求简洁快速，方案二足够用啦。

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