JSR 303 Bean Validation + 자바스크립트 클라이언트측 Validation

JSR 303 Bean Validation + 자바스크립트 클라이언트측 Validation

서버측에서 JSR 303 bean validation을 사용할 때 자바스크립트를 사용하여 클라이언트측 폼 validation을 수행하는 가장 좋은 방법은 무엇입니까?저는 현재 스프링 3와 하이버네이트 검증기를 사용하고 있습니다.

도조에 크게 의존하는 스프링제이에스를 보시기 바랍니다.자습서는 여기에서 찾을 수 있습니다.

Spring Roo를 다운로드하고 예제 스크립트 중 하나로 펫클리닉 샘플 애플리케이션을 만든 후 자바스크립트가 통합된 방법을 가지고 노는 것이 가장 쉬운 방법입니다.Spring Roo는 사용하는 것과 동일한 기술 스택으로 앱을 만듭니다(Spring+hibernate+jsr 303 구현).

이 오픈소스 프로젝트를 찾았는데 죽은 것 같아요, 부활할 가치가 있을지도 모르겠네요.

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

이 라이브러리는 Spring MVC와 통합된 JSR-303 및 Hibernate Validator 주석을 기반으로 HTML 양식에 대한 클라이언트 측 검증을 제공합니다.라이브러리는 HTML 양식과의 기본적인 상호 작용을 처리하는 자바스크립트 유효성 검사 코드 기반과 Hibernate Validator(JSR-303 사양이 아닌 것 포함)가 지원하는 유효성 검사 주석을 구현하는 자바스크립트 함수를 제공합니다.이 자바스크립트 코드베이스는 제공된 taglib을 이용하거나 jar에서 자바스크립트 파일을 추출하여 태그를 이용하여 포함함으로써 페이지에 포함될 수 있습니다.이 코드 베이스가 페이지에 포함되면 HTML 양식의 유효성을 확인하기 위한 자바스크립트 코드를 생성하기 위해 두 번째 태그립이 사용됩니다.태그 본문에 JSON 개체를 제공하여 추가 구성 정보를 지정할 수도 있습니다.

Spring Source의 최근 블로그 게시물을 기반으로 Spring MVC + JQuery + Bootstrap을 사용하여 작업하는 방법은 다음과 같습니다.

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;
}

주소 양식.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
}

유효성 검사 응답.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>

일부 리팩토링을 사용할 수 있지만 폼 데이터를 사용하여 아약스 GET를 수행하고 결과에 따라 페이지를 업데이트합니다.

리치페이스가 이를 뒷받침합니다.그들은 그들의 사이트에 작은 데모를 가지고 있습니다.

PrimeFaces 클라이언트 측 유효성 검사 프레임워크는 Bean 유효성 검사를 지원합니다.

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

여기 JSR-303의 오픈 소스 대안이 있습니다.

이 솔루션은 요청 메시지의 모든 유효성 검사를 수행할 수 있지만 번거로운 코딩은 필요 없습니다.

https://github.com/ckpoint/CheckPoint

Check-Point를 사용하면 컨트롤러 메서드의 주석을 변경하는 것만으로 추가 코드 없이 모든 유효성 검사가 가능합니다.

그러면 관리 페이지에서 모든 유효성 검사 설정을 쉽게 할 수 있습니다.

이 영상은 당신의 이해를 도울 수 있을 것 같습니다.https://youtu.be/I1aEIztXlhE

체크포인트 관리 페이지 설정 화면

편집:

실제로 JSR 303은 클라이언트 측 유효성 검사를 처리하는 가장 좋은 방법(IMO)입니다.가장 좋은 점은 전면에 적절한 js 라이브러리가 있으면 서버에서 동일한 유효성 검사(동일한 코드)를 사용할 수 있다는 것입니다(node.js를 사용할 경우).이 목적으로 라이브러리 @stopopsopa/validation을 만들었습니다. 다음과 같은 양식을 검증하고 있습니다(In React.js).

import React, { Component } from "react";
import ReactDOM from "react-dom";

import validator, {
  Collection,
  Required,
  Optional,
  NotBlank,
  Length,
  Email,
} from "@stopsopa/validator";

class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: {
        name: "",
        email: ""
      },
      errors: {},
      validate: false
    };
  }
  onSubmit = async e => {
    e.preventDefault();

    const errors = await validator(this.state.data, new Collection({
      name: new Required([
        new NotBlank(),
        new Length({min: 3}),
      ]),
      email: new Required([
        new NotBlank(),
        new Email(),
      ])
    }));
    this.setState({
      errors: errors.getFlat(),
      validate: true,
    });

    if ( ! errors.count()) {

      console.log('send data to server', this.state.data);
    }
  };
  onChange = (name, value) => {
    this.setState(state => ({
      ...state,
      data: { ...state.data, ...{ [name]: value } }
    }));
  };
  render() {
    const s = this.state;
    return (
      <form onSubmit={this.onSubmit}>
        <label>
          name:
          <input
            value={s.data.name}
            onChange={e => this.onChange("name", e.target.value)}
          />
        </label>
        {s.validate && s.errors.name && (
          <div className="error">{s.errors.name}</div>
        )}
        <br />
        <label>
          email:
          <input
            value={s.data.email}
            onChange={e => this.onChange("email", e.target.value)}
          />
        </label>
        {s.validate && s.errors.email && (
          <div className="error">{s.errors.email}</div>
        )}
        <br />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

라이브 예제는 여기서 이용 가능합니다: https://codesandbox.io/s/ymwky9603j

언급URL : https://stackoverflow.com/questions/2513863/jsr-303-bean-validation-javascript-client-side-validation