Xác nhận hợp lệ JSR 303 + Xác thực phía máy khách Javascript

Question

Cách tốt nhất để thực hiện xác thực biểu mẫu phía máy khách bằng cách sử dụng Javascript (sao chép mã tối thiểu) khi sử dụng xác thực bean JSR 303 ở phía máy chủ là gì? Tôi hiện đang sử dụng Spring 3 và Hibernate Validator.

Answer 1

Tôi khuyên bạn nên xem Spring JS, dựa chủ yếu vào Dojo. Một hướng dẫn có thể được tìm thấy here.

Cách dễ nhất để bắt đầu chơi với nó là tải xuống Spring Roo, tạo ứng dụng mẫu petclinic với một trong các kịch bản mẫu (điều này sẽ đưa bạn 5 phút) và sau đó chơi xung quanh cách tích hợp javascript. Spring Roo tạo một ứng dụng với cùng một ngăn xếp công nghệ mà bạn sử dụng (Spring + hibernate + implementation of jsr 303)

Answer 2

Tôi tìm thấy dự án mã nguồn mở này nhưng có vẻ đã chết, có thể nó đáng sống lại.

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

Thư viện này cung cấp khách hàng xác nhận bên của một hình thức HTML dựa trên JSR-303 và Hibernate Validator chú thích, tích hợp với Spring MVC. Thư viện cung cấp một cơ sở mã xác nhận JavaScript xử lý tương tác cơ bản với các biểu mẫu HTML, cũng như các hàm JavaScript thực hiện các chú thích xác nhận được hỗ trợ bởi Hibernate Validator (bao gồm cả các thông số không phải từ thông số JSR-303). Cơ sở mã JavaScript này có thể được bao gồm trong một trang bằng cách sử dụng thẻ tag được cung cấp hoặc bằng cách trích xuất tệp JavaScript từ bình và bao gồm nó bằng cách sử dụng thẻ. Khi cơ sở mã này đã được đưa vào một trang, thẻ taglib thứ hai được sử dụng để tạo mã JavaScript để xác thực biểu mẫu HTML. Bạn cũng có thể cung cấp một đối tượng JSON trong phần thân của thẻ để chỉ định thêm thông tin cấu hình.

Answer 3

Richfaces hỗ trợ điều này. Họ có một small demo on their site.

Answer 4

Đây là cách tôi đang làm nó bằng cách sử Spring MVC + JQuery + Bootstrap, một phần dựa trên 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> 

Nó có thể sử dụng một số cấu trúc lại, nhưng điều này sẽ làm một ajax GET với dữ liệu mẫu và cập nhật trang dựa trên kết quả.

Answer 5

Khung xác thực phía khách hàng PrimeFaces hỗ trợ xác thực bean.

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