Parsley 2.9.1：如何在表单提交前实现字段动态验证？

当然可以做到！Parsley.js本身就提供了灵活的机制，让你不用等提交按钮点击，就能在用户输入过程中触发验证。下面是几种实用的实现方案：

方案1：通过HTML属性快速配置触发时机 #

这是最省心的方式，直接给表单字段添加data-parsley-trigger属性，指定触发验证的事件类型，用户操作时就会自动触发验证：

<form id="custom-form">
  <input 
    type="email" 
    name="user-email" 
    required
    data-parsley-trigger="input"
    data-parsley-type="email"
    placeholder="输入邮箱"
  >
  <input 
    type="password" 
    name="user-pwd" 
    required
    data-parsley-trigger="focusout"
    data-parsley-minlength="6"
    placeholder="输入密码"
  >
  <button type="submit">提交</button>
</form>

这里data-parsley-trigger="input"表示用户每输入一个字符就会实时验证邮箱；focusout则是当密码框失去焦点时触发验证，平衡实时性和性能。

方案2：通过JS手动控制验证时机 #

如果需要更灵活的逻辑（比如满足特定条件才触发验证），可以监听字段的输入/改变事件，手动调用Parsley的验证方法：

// 先初始化表单的Parsley实例
const formInstance = $('#custom-form').parsley();

// 给邮箱字段绑定input事件，实时验证
$('#custom-form input[name="user-email"]').on('input', function() {
  // 只验证当前字段
  $(this).parsley().validate();
});

// 自定义按钮触发全表单验证（无需提交）
$('#pre-check-btn').on('click', function() {
  const isAllValid = formInstance.validate();
  if (isAllValid) {
    alert('所有字段验证通过，可以提交啦！');
  }
});

额外提示 #

• 可以组合多个触发事件，比如data-parsley-trigger="input focusout"，兼顾实时输入和失去焦点的场景
• 自定义验证规则也完全适配这些触发方式，实时验证会自动执行你定义的规则
• 验证状态会自动更新到DOM上，和提交触发的验证样式保持一致

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