Javascript 表单验证框架 : Request for Review

标签 javascript validation client-side-validation

我不确定我是否可以问这种问题,但在看到this之后在 Meta Stackoverflow 上,看起来这种问题是可以的。那么,回到我的问题:

几个月前,我用 Javascript 编写了一个验证框架。我知道已经存在像 jQuery Validation 这样的验证框架,但我想采用不同的验证方法。当前的方法涉及编写 Javascript 代码以对表单元素执行验证。通过查看表单源代码,并不能立即看出每个元素上发生了什么验证。在某种程度上,这可以通过使用指定不同类型验证的 CSS 类来解决。但我觉得即使这样也有局限性,因为您无法轻松自定义验证的行为(错误消息等)。我想使用 JSR-303 Bean Validation 在 Java 中做一些类似基于注解的验证的事情或 Hibernate Validator .

由于 HTML5 允许您向元素添加自定义属性,我想我可以利用它来“注释”表单元素以进行验证。所以,基本上,我想到了这个:

<input id = "myInput"
       name = "myInput"
       type = "text"
       class = "regula-validation"
       data-constraints = '@NotEmpty @IsNumeric @Between(min=1, max=5)' />

考虑到这个基本想法,我创建了一个 Javascript 框架:

  • 检查 DOM 中定义了约束的元素并将这些约束绑定(bind)到元素
  • 允许创建自定义约束
  • 允许以编程方式绑定(bind)约束
  • 验证绑定(bind)约束

此外,该框架还有以下特点:

  • 验证组,与 JSR-303 中指定的类似
  • 错误信息的插值

一旦我创建了我的框架,我就试图获得反馈和审查,但我不确定去哪里获得反馈和审查。我写了一些关于它的博客文章,并在没有太多运气的情况下将其发布到 Digg 和 Reddit(编程部分)。有几个人似乎很感兴趣,但我没有得到更多。

最近,在我的工作场所,我们一直在对遗留代码库(JSP 和 servlet)进行现代化改造,并将其迁移到 Spring MVC 中。当验证对话出现时,我向我的高级架构师介绍了我的框架。我做了一些集成和概念验证,他们似乎很感兴趣,并同意我将其添加到项目中。到目前为止,我只有自己的拙见,认为这将是一种有用的验证方式,所以这让我有信心相信我的想法和框架可能有一些优点。但是,我仍然需要更多的参与和框架。在我发现 Stackoverflow 确实允许此类问题后,我决定将其张贴在这里以获得一些建设性的批评、评论和反馈。

因此,我想立即介绍 Regula .我提供的链接转到 GitHub 上的 wiki,其中包含该框架的所有文档。您可以从here下载最新版本(v1.1.0) .

期待您的评论。

一些不直接相关的额外信息

我曾经考虑过将我的框架与 Spring 集成的想法,即将 bean 上的验证注释转换为客户端验证。最近我能够让它工作,即使是验证组(尽管目前不支持客户端组之间的继承关系)。这样,您只需使用验证约束注释字段属性,客户端验证代码就会自动生成。但是,我是 Spring 新手,所以我的方法可能不是那么干净。我也想就此获得一些反馈,所以如果有人感兴趣,请告诉我。理想情况下(我希望我不要太自命不凡)我想联系 Spring 人员,看看他们是否对此感兴趣。

最佳答案

我已经非常喜欢它了,它让我的 html 保持干净,而且构建自定义验证器的能力也很棒。我添加的一件事是绑定(bind)验证和提交功能的简写,并将其包装为一个 jQuery 插件:

if (jQuery) {
    (function($)
    {
        $.regula = function(formId, callback) 
        {
            regula.bind();

            $("#" + formId).submit(function() 
            {
                var validationResults = regula.validate();

                if (validationResults.length > 0)
                {
                    if (callback)
                        callback(validationResults);

                    return false;
                }

                return true;
            });
        };
    })(jQuery);
}

事实上,我刚刚 blogged关于它,因为我对它的干净和简单印象深刻。我仍将花时间浏览您的源代码,看看您是如何完成它的,但这是一个很好的开始 :)

关于集成您的框架,我主要使用 ASP.NET MVC,看看它如何将服务器端验证逻辑转换为客户端约束会很有趣。我可能会在下个月左右查看一些内容。

关于Javascript 表单验证框架 : Request for Review,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3472996/

相关文章:

javascript - 在 ruby​​-on-rails 中更新数据库后如何将 id 或 class 添加到 div ?

Javascript,将文本字段复制到新的 li 类

javascript - 多部分 jQuery 验证

javascript - ng-required 如何解释表达式?

java - 验证Java中的代码格式

ruby-on-rails - client_side_validations 'Cannot read property ' 用户[电子邮件 ]' of undefined'

javascript - 从被调用/子函数中退出/中断主函数

javascript - 顶部和底部水平滚动条

ruby-on-rails - 将 Rails 表单与 Angularjs 客户端表单验证一起使用时出现字段名称问题

ruby-on-rails - 如何为字母数字和电子邮件类型自定义 parsleyjs 错误消息?