Spring MVC 和引导模态形式:如何为其创建服务器端验证?

Question

我是春天和前端的新手。 我有一个(不是我的(旧的前端代码，可以在某个页面上显示模态形式：

模态形式为：

<div id="myModalForm" class="modal inmodal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content animated fadeIn">
<div class="modal-header">
<button type="button" class="close"  data-dismiss="modal"><span
aria-hidden="true">&times;</span><span class="sr-only"></span></button>
<h4 class="modal-title"><spring:message code="entity.modal.title"/></h4>
</div>
<div id="modalContent" class="modal-body">
<form id="createForm" name="createForm" class="" action="/entity/create"
method="post" enctype="multipart/form-data">
...
</form>
</div>
</div>
</div>
</div>

表单从 Java 脚本中显示。调用表单的按钮是：

<script>
$(document).ready(function () {
$('#tbl').DataTable({
responsive: true,
dom: 'l<"toolbar">frtip',
initComplete: function () {
$("div.toolbar")
.html('<button id="new_entity_btn" type="button" class = "btn btn-white" onclick="openCreateWindow()" ><spring:message
code="entity.table.create.btn"/> </button>');
}
});
/*activate tooltips*/
$(function () {
$('[data-toggle="popover"]').popover();
});
});
</script>

点击按钮是：

<script>
function openCreateWindow() {
$('#myModalForm').modal('show');
}
</script>

现在，如您所见#myModalForm不是Spring视图表单，因为它甚至不会生成要显示的get请求。它只是以模式显示在现有页面上。现在的问题是如何为其创建服务器端验证？我接下来试过：

1(将其重构为弹簧MVC形式，即通过

<form:form ... /> 

带属性的标记ModelAttribute='MyFormAttribute'.但是我不知道如何为 MyFormAttribute 创建后端对象，因为表单的外观不会生成 get-request。想法是将控制器的后方法设置为：

@RequestMapping(value = {"/entity/create"}, method = RequestMethod.POST)
String createNewEntity(
@ModelAttribute("MyFormAttribute") MyEntity entity,
BindingResult bindingResult,
Model model)

2( 尝试更改控制器的开机自检方法，以便返回错误。但是如果表单不是 mvc 一，则无法创建绑定结果参数

3(尝试通过jQuery.validing进行验证，即smth。喜欢：

<script>
/*form validation*/
$().ready(function () {
$("#createForm").validate({
rules: {
Field1: {
remote: function () {
var r = {
url: '/validateEntityField1',
type: "POST"
};
return r;
}
},
Field2: {
remote: function () {
var r = {
url: '/validateEntityField2',
type: "POST"
};
return r;
}
}
...
},
errorElement: "em",
highlight: function (element, errorClass, validClass) {
$(element).fadeOut(function () {
$(element).fadeIn();
});
$(element).addClass(errorClass).removeClass(validClass)
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass)
}
})
;
});
</script>

但它看起来相当丑陋，因为我应该在自己的端点上单独验证每个字段。除了表单有文件输入，所以我应该发送两次或 smth。

那么，我该如何实现下一个问题：

1. 将模式窗体保留在现有页面上
2. 在服务器端进行验证。对整个实体进行验证会很好。

Answer 1

回答我评论的问题。不是您正在寻找的确切代码，但会给您一个想法。虽然这取决于个人选择，但在控制器中，您可以使用如下所示的验证实用程序。在这里，您可以映射您的错误消息和 json 响应，稍后您希望在前端：

@RequestMapping(value = "/registration", method = RequestMethod.POST)
public @ResponseBody JsonResponse addUser(@ModelAttribute("user") User user, BindingResult result, Errors errors, Model model) {
JsonResponse response = new JsonResponse();
ValidationUtils.rejectIfEmptyOrWhitespace(result, "firstname", "Firstname is required. It can not be empty.");
if (user.getFirstname().length() < 4 || user.getFirstname().length() > 32) {
errors.rejectValue("firstname", "Firstname must be between 4 and 32 characters.");
}
ValidationUtils.rejectIfEmptyOrWhitespace(result, "lastname", "Lastname is required. It can not be empty.");
if (user.getLastname().length() < 4 || user.getLastname().length() > 32) {
errors.rejectValue("lastname", "Lastname must be between 4 and 32 characters.");
}
if (!result.hasErrors()) {
userList.add(user);
response.setStatus("SUCCESS");
response.setResult(userList);
} else {
response.setStatus("FAIL");
response.setResult(result.getAllErrors());
}
return response;
}

我从这里选择了Bootstrap Modal的示例：

https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

在您的 html 中的某个地方：

<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label class="col-form-label" for="username">Enter your First Name</label> 
<i class="fas fa-users"></i> 
<input type="text" id="firstname" class="form-control">
</div>
....
....
</div>

在你的 ajax 中放置(类似于这个(：

if (response.status == "SUCCESS") {
userInfo = "<ol>";
for (i = 0; i < response.result.length; i++) {
userInfo += "<br><li><b>Firstname</b> : "
+ response.result[i].firstname
+ response.result[i].lastname;
}

和

errorInfo = "";
for (i = 0; i < response.result.length; i++) {
errorInfo += "<br>" + (i + 1) + ". "
+ response.result[i].code;
}
$('#error').html(
"<b>Errors found during validation : </b>"
+ errorInfo);

我为此创建了一小段代码。你可以在GitHub上看看这里。