JSR 303 Bean验证+ Javascript客户端验证

Question

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

Answer 1

我建议你看看Spring JS，它很大程度上依赖于Dojo。教程可以找到here。

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

Answer 2

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

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

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

Answer 3

Richfaces支持此功能。他们有一个small demo on their site。

Answer 4

以下是我正在做它用Spring MVC + JQuery + Bootstrap，部分基于a recent blog post at 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 5

PrimeFaces客户端验证框架支持Bean验证。

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