免责声明：我在这场比赛中有一匹马；我是以下库的作者。
我之前回答过一个类似的问题，你可能想看看。我想推荐一个我设计的名为Regula的框架。它可以满足您的大部分要求。data-constraints验证规则（或约束）可以使用属性直接附加到元素上。
例如，您可以执行以下操作：
<input type="text" name="something" data-constraints='@Required' />
您甚至可以设置错误消息或标签等内容：
<input type="text" name="something" data-constraints='@Required(label="something" message="{label} is required.")' />
自定义验证也很容易。您确实需要在 JavaScript 中定义一次验证器，但之后您可以使用它：
regula.custom({
name: "MustBe42",
defaultMessage: "The answer must be equal to 42",
validator: function() {
return this.value == 42;
}
});
接着：
<input type="text" name="something" data-constraints='@MustBe42' />
还支持参数：
regula.custom({
name: "MustBeSpecifiedNumber",
params: ["number"],
defaultMessage: "The answer must be equal to {number}",
validator: function(params) {
return this.value === params.number;
}
});
接着：
<input type="text" name="something" data-constraints='@MustBeSpecifiedNumber(number=10)' />
您询问了验证组，这也可以在 Regula 中完成：
<input type="text" name="street" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="city" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="state" data-constraints='@Required(groups=[AddressGroup])' />
<input type="text" name="zip" data-constraints='@Required(groups=[AddressGroup])' />
然后你可以验证：
var constraintViolations = regula.validate({
groups: [regula.Group.AddressGroup] //AddressGroup property is automatically added
});
就 HTML5 支持和异步验证而言，这些功能将在 Regula 的 1.3 版本中提供，该版本目前处于 Alpha 阶段。我有一些小功能和文档要更新，但您应该能够查看当前在 GitHub 上的内容，并且它应该适合您。HTML5 和异步验证主要完成。
关于 HTML5 约束，您可以使用本机属性，或使用 Regula 包装的版本，这些版本为您提供更多选项，例如分配给组和自定义消息。例如：
<input type="text" name="something" required="true" />
将得到 Regula 的认可和验证。但你也可以这样做：
<input type="text" name="something" data-constraints='@HTML5Required(groups=[MyGroup], message="{label} is required!", label="something")' />
<input type="text" name="somethingElse" data-constraints='@HTML5Required(groups=[MyGroup], message="{label} is required!", label="somethingElse")' />
您通常不能仅使用本机 HTML5 验证来做到这一点。然而，需要注意的重要一点是，浏览器必须支持 HTML5 验证才能正常工作。Regula 不尝试模拟 HTML5 功能，因为它涉及的不仅仅是简单的验证；它还涉及特定的 UI 组件。因此，为了实现跨浏览器兼容性，您需要使用某种 polyfill 或 shim。
异步验证也是可能的：
regula.custom({
name: "AsyncConstraint",
async: true,
defaultMessage: "{label} did not validate properly.",
validator: function(params, validator, callback) {
jQuery.ajax({
url: "myurl",
dataType: "json",
data: someData,
success: function(data) {
callback(data.successful)
}
});
}
});
然后你可以注释你的元素：
<input type="text" name="something" data-constraints='@AsynchronousConstraint' />
并通过以下方式验证：
//Simply calling validate will validate all constraints on all elements
regula.validate(function(constraintViolations) {
//do stuff with constraintViolations
});
进行条件验证和使用预先存在的验证器也很容易：
regula.custom({
name: "ConditionalRequired",
defaultMessage: "The answer must be equal to {number}",
validator: function(params, validator) {
var result = true;
if(some condition is true) {
result = validator.required(this, params, validator);
}
return result;
}
});
该validator对象基本上使您可以访问每个约束的原始验证器函数。
Regula 还有许多其他特性，例如复合约束（基本上就像在 JSR-303 中一样）。
Regula 没有任何与 UI 相关的逻辑，例如显示错误消息。它只是一个验证引擎，所以它只是这样做的。您希望如何显示错误消息取决于您。
希望你觉得这很有用！正如我之前提到的，当前版本是 1.3.0；它是 alpha 版本，您可以从这里获取。