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

时间：2010-03-25 08:05:14

标签： java javascript spring validation bean-validation

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

7 个答案:

答案 0 :(得分：5)

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

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

答案 1 :(得分：5)

我找到了这个开源项目，但它看起来已经死了，也许它值得复活。

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

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

答案 2 :(得分：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并根据结果更新页面。

答案 3 :(得分：1)

Richfaces支持这一点。他们有small demo on their site。

答案 4 :(得分：0)

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

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

答案 5 :(得分：0)

这里是JSR-303的开源替代品。

此解决方案可以执行请求消息的所有验证，但无需麻烦的编码。

https://github.com/ckpoint/CheckPoint

有了Check-Point，只需更改Controller方法的注释，就可以进行所有验证而无需进一步的代码。

之后，可以在管理页面中轻松进行所有验证设置。

我认为该视频可以帮助您理解。 https://youtu.be/I1aEIztXlhE

Check-Point Admin-Page Setting Screen

答案 6 :(得分：0)

编辑：

实际上，JSR 303是处理客户端验证的最佳方法（IMO）。最好的事情是，如果前面有正确的js库，则可以在服务器上使用相同的验证（相同的代码）（如果要使用node.js）。 为此，我已经创建了库@stopsopa/validation，正在验证这样的表单（在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

相关问题
最新问题