1. 개요
검증은 우리가 기대하는 것만 큼 간단하지 않습니다. 물론 사용자가 애플리케이션에 입력 한 값의 유효성을 검사하는 것은 데이터의 무결성을 유지하는 데 매우 중요합니다.
웹 애플리케이션의 맥락에서 데이터 입력은 일반적으로 HTML 양식을 사용하여 수행되며 클라이언트 측 및 서버 측 유효성 검사가 모두 필요합니다.
이 예제에서는 AngularJS를 사용하여 양식 입력의 클라이언트 측 유효성 검사 를 구현하고 Spring MVC 프레임 워크를 사용하여 서버 측 유효성 검사 를 구현 하는 방법을 살펴 봅니다 .
이 기사는 Spring MVC에 중점을 둡니다. Spring Boot의 유효성 검사 기사 에서는 Spring Boot에서 유효성 검사 를 수행하는 방법을 설명합니다.
2. Maven 의존성
시작하려면 다음 의존성을 추가해 보겠습니다.
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.4.0.Final</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.7</version>
</dependency>
Spring-webmvc , hibernate-validator 및 jackson-databind 의 최신 버전은 Maven Central에서 다운로드 할 수 있습니다.
3. Spring MVC를 사용한 유효성 검사
응용 프로그램은 쉽게 피할 수 있으므로 클라이언트 측 유효성 검사에만 의존해서는 안됩니다. 부정확하거나 악의적 인 값이 저장되거나 애플리케이션 로직이 부적절하게 실행되는 것을 방지하려면 서버 측에서도 입력 값의 유효성을 검사하는 것이 중요합니다.
Spring MVC는 JSR 349 Bean Validation 사양 어노테이션 을 사용하여 서버 측 유효성 검증을 지원합니다 . 이 예에서는 hibernate-validator 인 사양의 참조 구현을 사용합니다 .
3.1. 데이터 모델
적절한 유효성 검사 어노테이션으로 어노테이션이 달린 속성이 있는 User 클래스를 만들어 보겠습니다 .
public class User {
@NotNull
@Email
private String email;
@NotNull
@Size(min = 4, max = 15)
private String password;
@NotBlank
private String name;
@Min(18)
@Digits(integer = 2, fraction = 0)
private int age;
// standard constructor, getters, setters
}
위에서 사용 된 어노테이션은 hibernate-validator 라이브러리에 특정한 @Email 및 @NotBlank를 제외 하고 JSR 349 사양에 속합니다 .
3.2. Spring MVC 컨트롤러
새 User 객체를 List 에 저장하는 데 사용할 / user 끝점 을 정의하는 컨트롤러 클래스를 만들어 보겠습니다 .
요청 매개 변수를 통해 수신 된 User 객체의 유효성 검사를 활성화 하려면 선언 앞에 @Valid 어노테이션 이 와야 하며 유효성 검사 오류는 BindingResult 인스턴스에 보관됩니다 .
객체에 잘못된 값이 포함되어 있는지 확인하려면 BindingResult 의 hasErrors () 메서드를 사용할 수 있습니다 .
경우 hasErrors () 반환 사실 , 우리는 반환 할 수 있습니다 JSON 배열 통과하지 못한 검증과 관련된 오류 메시지를 포함합니다. 그렇지 않으면 List에 개체를 추가합니다.
@PostMapping(value = "/user")
@ResponseBody
public ResponseEntity<Object> saveUser(@Valid User user,
BindingResult result, Model model) {
if (result.hasErrors()) {
List<String> errors = result.getAllErrors().stream()
.map(DefaultMessageSourceResolvable::getDefaultMessage)
.collect(Collectors.toList());
return new ResponseEntity<>(errors, HttpStatus.OK);
} else {
if (users.stream().anyMatch(it -> user.getEmail().equals(it.getEmail()))) {
return new ResponseEntity<>(
Collections.singletonList("Email already exists!"),
HttpStatus.CONFLICT);
} else {
users.add(user);
return new ResponseEntity<>(HttpStatus.CREATED);
}
}
}
보시다시피 서버 측 유효성 검사는 클라이언트 측에서는 불가능한 추가 검사를 수행 할 수있는 기능을 추가합니다.
우리의 경우 동일한 이메일을 가진 사용자가 이미 존재하는지 확인할 수 있으며,이 경우 상태 409 CONFLICT를 반환합니다.
또한 사용자 List을 정의하고 몇 가지 값으로 초기화해야합니다.
private List<User> users = Arrays.asList(
new User("ana@yahoo.com", "pass", "Ana", 20),
new User("bob@yahoo.com", "pass", "Bob", 30),
new User("john@yahoo.com", "pass", "John", 40),
new User("mary@yahoo.com", "pass", "Mary", 30));
사용자 List을 JSON 개체로 검색하기위한 매핑도 추가해 보겠습니다.
@GetMapping(value = "/users")
@ResponseBody
public List<User> getUsers() {
return users;
}
Spring MVC 컨트롤러에서 필요한 마지막 항목은 애플리케이션의 메인 페이지를 반환하는 매핑입니다.
@GetMapping("/userPage")
public String getUserProfilePage() {
return "user";
}
우리는 한 번 봐 걸릴 것 user.html의 AngularJS와 섹션에서 더 자세히 페이지를.
3.3. Spring MVC 구성
애플리케이션에 기본 MVC 구성을 추가해 보겠습니다.
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.baeldung.springmvcforms")
class ApplicationConfiguration implements WebMvcConfigurer {
@Override
public void configureDefaultServletHandling(
DefaultServletHandlerConfigurer configurer) {
configurer.enable();
}
@Bean
public InternalResourceViewResolver htmlViewResolver() {
InternalResourceViewResolver bean = new InternalResourceViewResolver();
bean.setPrefix("/WEB-INF/html/");
bean.setSuffix(".html");
return bean;
}
}
3.4. 응용 프로그램 초기화
애플리케이션을 실행하기 위해 WebApplicationInitializer 인터페이스를 구현하는 클래스를 만들어 보겠습니다 .
public class WebInitializer implements WebApplicationInitializer {
public void onStartup(ServletContext container) throws ServletException {
AnnotationConfigWebApplicationContext ctx
= new AnnotationConfigWebApplicationContext();
ctx.register(ApplicationConfiguration.class);
ctx.setServletContext(container);
container.addListener(new ContextLoaderListener(ctx));
ServletRegistration.Dynamic servlet
= container.addServlet("dispatcher", new DispatcherServlet(ctx));
servlet.setLoadOnStartup(1);
servlet.addMapping("/");
}
}
3.5. Curl을 사용하여 Spring Mvc 유효성 검사 테스트
AngularJS 클라이언트 섹션을 구현하기 전에 다음 명령과 함께 cURL을 사용하여 API를 테스트 할 수 있습니다.
curl -i -X POST -H "Accept:application/json"
"localhost:8080/spring-mvc-forms/user?email=aaa&password=12&age=12"
응답은 기본 오류 메시지가 포함 된 배열입니다.
[
"not a well-formed email address",
"size must be between 4 and 15",
"may not be empty",
"must be greater than or equal to 18"
]
4. AngularJS 검증
클라이언트 측 유효성 검사는 유효한 데이터를 성공적으로 제출하는 방법에 대한 정보를 사용자에게 제공하고 애플리케이션과 계속 상호 작용할 수 있도록하므로 더 나은 사용자 경험을 만드는 데 유용합니다.
AngularJS 라이브러리는 양식 필드에 유효성 검사 요구 사항을 추가하고, 오류 메시지를 처리하고, 유효하고 잘못된 양식을 스타일링하는 데 큰 지원을 제공합니다.
먼저 유효성 검사 메시지에 사용되는 ngMessages 모듈 을 삽입하는 AngularJS 모듈을 만들어 보겠습니다 .
var app = angular.module('app', ['ngMessages']);
다음으로, 이전 섹션에서 빌드 한 API를 사용할 AngularJS 서비스와 컨트롤러를 만들어 보겠습니다.
4.1. AngularJS 서비스
우리 서비스에는 MVC 컨트롤러 메서드를 호출하는 두 가지 메서드가 있습니다. 하나는 사용자를 저장하고 다른 하나는 사용자 List을 검색합니다.
app.service('UserService',['$http', function ($http) {
this.saveUser = function saveUser(user){
return $http({
method: 'POST',
url: 'user',
params: {email:user.email, password:user.password,
name:user.name, age:user.age},
headers: 'Accept:application/json'
});
}
this.getUsers = function getUsers(){
return $http({
method: 'GET',
url: 'users',
headers:'Accept:application/json'
}).then( function(response){
return response.data;
} );
}
}]);
4.2. AngularJS 컨트롤러
UserCtrl의 제어기이 주입 UserService는 서비스 방법 및 처리 응답하여 에러 메시지를 호출
app.controller('UserCtrl', ['$scope','UserService', function ($scope,UserService) {
$scope.submitted = false;
$scope.getUsers = function() {
UserService.getUsers().then(function(data) {
$scope.users = data;
});
}
$scope.saveUser = function() {
$scope.submitted = true;
if ($scope.userForm.$valid) {
UserService.saveUser($scope.user)
.then (function success(response) {
$scope.message = 'User added!';
$scope.errorMessage = '';
$scope.getUsers();
$scope.user = null;
$scope.submitted = false;
},
function error(response) {
if (response.status == 409) {
$scope.errorMessage = response.data.message;
}
else {
$scope.errorMessage = 'Error adding user!';
}
$scope.message = '';
});
}
}
$scope.getUsers();
}]);
위의 예 에서 userForm 의 $ valid 속성 이 true 인 경우에만 서비스 메서드가 호출되는 것을 볼 수 있습니다 . 그래도이 경우 중복 이메일에 대한 추가 검사가 있는데, 이는 서버에서만 수행 할 수 있으며 error () 함수 에서 별도로 처리됩니다 .
또한 양식이 제출되었는지 여부를 알려주 는 제출 된 변수가 정의되어 있습니다.
처음에이 변수는 false 이고 saveUser () 메서드 를 호출 하면 true가 됩니다. 사용자가 양식을 제출하기 전에 유효성 검사 메시지를 표시하지 않으려면 제출 된 변수를 사용하여 이를 방지 할 수 있습니다 .
4.3. AngularJS 유효성 검사를 사용한 양식
AngularJS 라이브러리와 AngularJS 모듈을 사용하려면 user.html 페이지에 스크립트를 추가해야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js">
</script>
<script src="js/app.js"></script>
그런 다음 ng-app 및 ng-controller 속성 을 설정하여 모듈과 컨트롤러를 사용할 수 있습니다 .
<body ng-app="app" ng-controller="UserCtrl">
HTML 양식을 만들어 보겠습니다.
<form name="userForm" method="POST" novalidate
ng-class="{'form-error':submitted}" ng-submit="saveUser()" >
...
</form>
기본 HTML5 유효성 검사를 방지하고이를 우리 자신의 것으로 대체하려면 양식에 novalidate 속성 을 설정해야합니다 .
NG 수준의 속성은 추가 폼 오류 경우 폼에 동적으로 CSS 클래스를 제출 변수의 값이 사실을 .
NG 제출 속성은 폼이 제출 될 때 호출 될 AngularJS와 컨트롤러 기능을 정의합니다. 사용하여 제출 NG 대신 ng를 클릭하면 그것은 또한 Enter 키를 사용하여 양식을 제출에 응답하는 장점이있다.
이제 사용자 속성에 대한 4 개의 입력 필드를 추가하겠습니다.
<label class="form-label">Email:</label>
<input type="email" name="email" required ng-model="user.email" class="form-input"/>
<label class="form-label">Password:</label>
<input type="password" name="password" required ng-model="user.password"
ng-minlength="4" ng-maxlength="15" class="form-input"/>
<label class="form-label">Name:</label>
<input type="text" name="name" ng-model="user.name" ng-trim="true"
required class="form-input" />
<label class="form-label">Age:</label>
<input type="number" name="age" ng-model="user.age" ng-min="18"
class="form-input" required/>
각 입력 필드에는 ng-model 속성을 통해 사용자 변수 의 속성에 대한 바인딩이 있습니다.
유효성 검사 규칙을 설정 하기 위해 HTML5 필수 속성과 여러 AngularJS 관련 속성 ( ng-minglength, ng-maxlength, ng-min 및 ng-trim)을 사용 합니다.
를 들어 이메일 필드, 우리는 또한 사용 유형 의 값을 가진 속성 이메일 클라이언트 측 이메일 검증을.
각 필드에 해당하는 오류 메시지를 추가하기 위해 AngularJS는 입력의 $ errors 객체 를 반복 하고 각 유효성 검사 규칙에 따라 메시지를 표시 하는 ng-messages 지시문을 제공합니다 .
입력 정의 바로 뒤에 이메일 필드에 대한 지시문을 추가해 보겠습니다 .
<div ng-messages="userForm.email.$error"
ng-show="submitted && userForm.email.$invalid" class="error-messages">
<p ng-message="email">Invalid email!</p>
<p ng-message="required">Email is required!</p>
</div>
다른 입력 필드에 대해서도 유사한 오류 메시지를 추가 할 수 있습니다.
부울 표현식과 함께 ng-show 속성을 사용하여 이메일 필드에 대한 지시문이 표시 되는 시기를 제어 할 수 있습니다 . 이 예에서는 필드에 잘못된 값이있을 때 지시문을 표시합니다. 즉, $ invalid 속성이 true 이고 제출 된 변수도 true 입니다.
필드에 대해 한 번에 하나의 오류 메시지 만 표시됩니다.
$ valid 속성 에 따라 필드가 유효한 경우 입력 필드 뒤에 확인 표시 기호 (HEX 코드 문자 ✓로 표시됨)를 추가 할 수도 있습니다 .
<div class="check" ng-show="userForm.email.$valid">✓</div>
AngularJS 유효성 검사는 또한 ng-valid 및 ng-invalid 와 같은 CSS 클래스 또는 ng-invalid-required 및 ng-invalid-minlength 와 같은보다 구체적인 CSS 클래스를 사용하여 스타일링을 지원합니다 .
양식의 양식 오류 클래스 내부에 잘못된 입력에 대해 CSS 속성 border-color : red 를 추가해 보겠습니다 .
.form-error input.ng-invalid {
border-color:red;
}
CSS 클래스를 사용하여 오류 메시지를 빨간색으로 표시 할 수도 있습니다.
.error-messages {
color:red;
}
모든 것을 합친 후 유효한 값과 유효하지 않은 값을 혼합하여 채울 때 클라이언트 측 양식 유효성 검사가 어떻게 보이는지 예를 살펴 보겠습니다.
5. 결론
이 예제에서는 AngularJS와 Spring MVC를 사용하여 클라이언트 측과 서버 측 검증을 결합하는 방법을 보여주었습니다.
항상 그렇듯이 예제의 전체 소스 코드는 GitHub 에서 찾을 수 있습니다 .
애플리케이션을 보려면 실행 한 후 / userPage URL에 액세스하십시오 .
- https://docs.spring.io/spring-framework/docs/current/reference/html
- https://www.baeldung.com/validation-angularjs-spring-mvc
'Java' 카테고리의 다른 글
Spring의 MaxUploadSizeExceededException (0) | 2021.04.09 |
---|---|
Spring MVC에서 Forms 시작하기 (0) | 2021.04.09 |
JSTL 라이브러리 사용방법(예제) (0) | 2021.04.08 |
Docker Compose에서 PostgreSQL로 Spring Boot 실행 (0) | 2021.04.08 |
Spring에서의 Thymeleaf 사용 소개 (0) | 2021.04.08 |