JSR 303 Beanvalidation+ Javascript客户端validation

在服务器端使用JSR 303 beanvalidation时，使用Javascript执行客户端表单validation（最less代码重复）的最佳方式是什么？ 我目前正在使用Spring 3和Hibernate Validator 。

Answer 1

我build议你看看Spring JS，它主要依赖于Dojo。 一个教程可以在这里find。

最简单的方法就是下载Spring Roo ，使用一个示例脚本创buildpetclinic示例应用程序（这需要5分钟），然后演示如何集成javascript。 Spring Roo使用相同的技术堆栈创build应用程序（Spring + Hibernate +实现jsr 303）

Answer 2

我发现这个开源项目，但它看起来死了，也许值得复活。

http://kenai.com/projects/jsr303js/pages/Home

该库提供基于JSR-303和Hibernate Validator注解的HTML表单的客户端validation，并与Spring MVC集成。 该库提供了一个处理与HTML表单基本交互的JavaScriptvalidation代码库，以及实现Hibernate Validator支持的validation注释的JavaScript函数（包括那些不是来自JSR-303规范的）。 此JavaScript代码库可以通过使用提供的taglib或通过从jar中提取JavaScript文件并使用标签包含它来包含在页面中。 一旦这个代码库被包含在一个页面中，第二个taglib将被用来生成validationHTML表单的JavaScript代码。 您也可以在标签主体中提供JSON对象来指定其他configuration信息。

Answer 3

下面是我如何使用Spring MVC + JQuery + Bootstrap ，部分基于SpringSource最近发布的博文 ：

AddressController.java

@RequestMapping(value="/validate") public @ResponseBody ValidationResponse processForm(Model model, @Valid AddressForm addressForm, BindingResult result) { ValidationResponse res = new ValidationResponse(); if (result.hasErrors()) { res.setStatus("FAIL"); for (ObjectError error : result.getAllErrors()) { if (error instanceof FieldError) { FieldError fieldError = (FieldError) error; res.addError(fieldError.getField(), fieldError.getDefaultMessage()); } } } else { res.setStatus("SUCCESS"); } return res; } 

AddressForm.java

 public class AddressForm { @NotNull @Size(min=1, max=50, message="Address 1 is required and cannot be longer than {max} characters") private String address1; @Size(max=50, message="Address 2 cannot be longer than {max} characters") private String address2; // etc } 

ValidationResponse.java：

 public class ValidationResponse { private String status; private Map<String,String> errors; // getters, setters } 

在address.jsp：

 <f:form commandName="addressForm"> <div class="control-group"> <label for="address1">Address 1</label> <div class="controls"> <f:input path="address1" type="text" placeholder="Placeholder Address 1" class="wpa-valid" /> <span class="help-inline"></span> </div> </div> <!-- etc --> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save</button> <button type="button" class="btn">Cancel</button> </div> </f:form> <script type="text/javascript"> function collectFormData($fields) { var data = {}; for (var i = 0; i < $fields.length; i++) { var item = $($fields[i]); data[item.attr("id")] = item.val(); } return data; } function clearErrors($fields) { for (var i = 0; i < $fields.length; i++) { var item = $($fields[i]); $("#"+item.attr("id")).parents(".control-group").removeClass("error"); $("#"+item.attr("id")).siblings(".help-inline").html(""); } } function markErrors(errors) { $.each(errors, function(key, val) { $("#"+key).parents(".control-group").addClass("error"); $("#"+key).siblings(".help-inline").html(val); }); } $(document).ready(function() { var $form = $("form.validate"); $form.bind("submit", function(e) { var $fields = $form.find(".validate"); clearErrors($fields); var data = collectFormData($fields); var validationUrl = "validate"; $.get(validationUrl, data, function(response) { $("#alert").removeClass(); if (response.status == "FAIL") { markErrors(response.errors); $("#alert").addClass("alert alert-error"); $("#alert").html("Correct the errors below and resubmit."); } else { $("#alert").addClass("alert alert-success"); $("#alert").html("Success!"); $form.unbind("submit"); $form.submit(); } }, "json"); e.preventDefault(); return false; }); }); </script> 

它可以使用一些重构，但是这将会对表单数据执行ajax GET，并根据结果更新页面。

Answer 4

Richfaces支持这一点。 他们在他们的网站上有一个小演示 。

Answer 5

PrimeFaces客户端validation框架支持Beanvalidation。

http://blog.primefaces.org/?p=2874