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