如何使用带有springmvc的angularjs获得服务器端验证?

时间:2021-08-16 15:39:05

My web application is built using spring mvc and currently I am validating it via jquery on frontend and spring-mvc on backend. The code for this is something like

我的web应用程序是使用spring mvc构建的,目前我在前台使用jquery验证它,后台使用spring-mvc验证它。这里的代码是这样的

<form:input path="defaultDate" size="20" />
<form:errors path="defaultDate" />

for each element I have to place the form:errors control. Now I want to move to angularjs but not sure how to validate the backend code. I just want to use the simple html template instead of jsp code and templates and I can validate it easily via angularjs... something like

对于每个元素,我都必须放置表单:错误控制。现在我想转移到angularjs,但不确定如何验证后端代码。我只想使用简单的html模板,而不是jsp代码和模板,我可以通过angularjs轻松地验证它……类似的

    <input ng-model="defaultDate" type="text" name="defaultDate" id="defaultDate" required />
    <label ng-show="userForm.defaulteDate.$invalid" class="error">Please enter val</label>

but how to validate it on server side and place the error correctly?

但是如何在服务器端验证它并正确地放置错误呢?

2 个解决方案

#1


2  

While it's legitimate to suggest that validation logic should be pushed to the client and duplicated on the server side (but more generic in its response), there are validations that are more practical or only possible to perform on the server side. An example is a registration form verifying that a username is not already taken. So, you can't entirely dodge the problem of binding a server-generated message or error condition back to the client UI.

虽然建议将验证逻辑推到客户端并在服务器端复制(但在其响应中更通用)是合理的,但也有更实用的验证,或者只可能在服务器端执行。一个例子是一个注册表单,验证用户名是否已经被接收。因此,不能完全避免将服务器生成的消息或错误条件绑定回客户端UI的问题。

The Angular way of handling message binding is to hook into the NgModelController object of ngModel. Its $errors property can be decorated with as many keys as you have error conditions, and that property in turn can drive message display in the template. This is normally done with a custom validation directive added as an attribute to the input element. There's a good example of this here along with helpful explanation of the new ngMessages directive.

处理消息绑定的角度方式是将消息绑定到ngModel的NgModelController对象中。它的$error属性可以在有错误条件的情况下使用多个键进行修饰,而该属性又可以在模板中驱动消息显示。这通常是通过添加自定义验证指令作为输入元素的属性来实现的。这里有一个很好的例子,以及对新的ngMessages指令的有用解释。

Angular provides the model controller and templating mechanism. Getting the messages into the server response, unpacking them on the client and binding them to the model controller is your responsibility. Note that you can access the form controller object by its name as a scope variable and the field models as properties of that. You won't see this initially in your view controller since the form controller doesn't come into existence until after the view has rendered, but callbacks in the controller handling a server response can use it. Here's an example of this approach with rails.

角提供了模型控制器和模板机制。将消息发送到服务器响应,在客户机上解包并将它们绑定到模型控制器是您的职责。注意,您可以通过它的名称作为范围变量访问表单控制器对象,并将字段模型作为它的属性。您最初不会在视图控制器中看到这一点,因为表单控制器直到视图呈现之后才出现,但是处理服务器响应的控制器中的回调可以使用它。这里有一个使用rails的例子。

#2


1  

As Jb Nizet noted in his comments, server-side and client-side validation should be separate layers, and you should do both.

正如Jb Nizet在他的评论中所指出的,服务器端和客户端验证应该是分层的,并且应该同时进行。

To get you started in the right direction on this from an Angular perspective, you can use the input[date] directive that comes out of the box with Angular. Note, though, that it is less flexible if you're supporting non-HTML5 browsers. It would be prudent to explore the documentation on custom validation, because it makes it super easy to wire validation logic of any complexity to any input.

要从一个角度开始,你可以使用输入[date]指令,这个指令来自于带有角度的盒子。但是请注意,如果您支持非html5浏览器,那么它就不那么灵活了。研究关于自定义验证的文档是谨慎的,因为它使将任何复杂的验证逻辑连接到任何输入变得非常容易。

#1


2  

While it's legitimate to suggest that validation logic should be pushed to the client and duplicated on the server side (but more generic in its response), there are validations that are more practical or only possible to perform on the server side. An example is a registration form verifying that a username is not already taken. So, you can't entirely dodge the problem of binding a server-generated message or error condition back to the client UI.

虽然建议将验证逻辑推到客户端并在服务器端复制(但在其响应中更通用)是合理的,但也有更实用的验证,或者只可能在服务器端执行。一个例子是一个注册表单,验证用户名是否已经被接收。因此,不能完全避免将服务器生成的消息或错误条件绑定回客户端UI的问题。

The Angular way of handling message binding is to hook into the NgModelController object of ngModel. Its $errors property can be decorated with as many keys as you have error conditions, and that property in turn can drive message display in the template. This is normally done with a custom validation directive added as an attribute to the input element. There's a good example of this here along with helpful explanation of the new ngMessages directive.

处理消息绑定的角度方式是将消息绑定到ngModel的NgModelController对象中。它的$error属性可以在有错误条件的情况下使用多个键进行修饰,而该属性又可以在模板中驱动消息显示。这通常是通过添加自定义验证指令作为输入元素的属性来实现的。这里有一个很好的例子,以及对新的ngMessages指令的有用解释。

Angular provides the model controller and templating mechanism. Getting the messages into the server response, unpacking them on the client and binding them to the model controller is your responsibility. Note that you can access the form controller object by its name as a scope variable and the field models as properties of that. You won't see this initially in your view controller since the form controller doesn't come into existence until after the view has rendered, but callbacks in the controller handling a server response can use it. Here's an example of this approach with rails.

角提供了模型控制器和模板机制。将消息发送到服务器响应,在客户机上解包并将它们绑定到模型控制器是您的职责。注意,您可以通过它的名称作为范围变量访问表单控制器对象,并将字段模型作为它的属性。您最初不会在视图控制器中看到这一点,因为表单控制器直到视图呈现之后才出现,但是处理服务器响应的控制器中的回调可以使用它。这里有一个使用rails的例子。

#2


1  

As Jb Nizet noted in his comments, server-side and client-side validation should be separate layers, and you should do both.

正如Jb Nizet在他的评论中所指出的,服务器端和客户端验证应该是分层的,并且应该同时进行。

To get you started in the right direction on this from an Angular perspective, you can use the input[date] directive that comes out of the box with Angular. Note, though, that it is less flexible if you're supporting non-HTML5 browsers. It would be prudent to explore the documentation on custom validation, because it makes it super easy to wire validation logic of any complexity to any input.

要从一个角度开始,你可以使用输入[date]指令,这个指令来自于带有角度的盒子。但是请注意,如果您支持非html5浏览器,那么它就不那么灵活了。研究关于自定义验证的文档是谨慎的,因为它使将任何复杂的验证逻辑连接到任何输入变得非常容易。