jQuery Validate 플러그인 Ajax 방식으로 입력 값을 검증하는 예제

프로젝트에서 자주 만나는 백엔드 검증 문제, 예를 들어 사용자 이름, 사용자 계정이 존재하는지 확인하는 문제가 있습니다. jQuery Validate 플러그인을 사용하여 remote 검증 규칙을 통해 검증을 완료할 수 있습니다.

예제:

1.기본 사용법

1.이를 확인해야 하는 폼

<form id="registForm"> 
 <input type="text" id="username" name="username"> 
</form> 

2.js

remote 검증 규칙을 사용하면 됩니다. 가장 간단하고 강력한 작성 방식은 remote: url입니다. 이 경우 요청된 URL에 현재 검증된 값이 자동으로 추가됩니다. 예를 들어, 아래와 같은 작성 방식에서 요청된 URL은 xxx입니다:/checkUsername.do?username=test

// jquery, validate 라이브러리를 가져오는 부분은 생략합니다;
$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// 인증 성공 처리
			...
		}
	});
	$("#registForm").validate({
		rules: {
			username: {
				required: true,
				remote: "checkUsername.do"
			},			
		},
		messages: {
			username: {
				required: "사용자 이름을 입력해 주세요",
				remote: "사용자 이름이 이미 존재합니다"
			}
		}
	});
});

3.백엔드（Spring MVC 테스트）

백엔드 응답은 true 또는 false만 출력할 수 있으며, 다른 데이터는 출력할 수 없습니다. true: 인증 성공, false: 인증 실패; 반환 타입을 boolean 또는 String으로 설정할 수 있습니다;

(1).boolean을 반환

@RequestMapping("/checkUsername)
public @ResponseBody boolean checkUsername(@RequestParam String username) {
	// 테스트
	return !"test".equals(username);
}

(2).String을 반환

@RequestMapping("/checkUsername)
public @ResponseBody String checkUsername(@RequestParam String username) {
	// 테스트
	return !"test".equals(username) ? "true" : "false";
}

2. 다른 사용 방법

위의 사용 방법은 실제 요구 사항을 충족시키지 못할 수 있습니다. 때로는 다른 매개변수를 제출하거나 매개변수 이름과 속성 이름이 일치하지 않거나 요청 방식이 POST인 경우가 있습니다. 다음과 같이 작성하면 됩니다:

1.js

data 옵션을 사용하면 됩니다. 즉 jQuery의 $.ajax({...})의 작성 방식입니다;

제출된 데이터는 함수의 반환 값 방식으로 직접 값을 쓰면 문제가 발생합니다;

기본적으로 현재 인증된 값을 제출합니다. 예를 들어, username: xxx는 기본적으로 매개변수로 제출됩니다;

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //데이터 전송 방식
		dataType: "json",   //데이터 수신 형식 
		data: {      //전달할 데이터
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "추가 정보";
			}
		 }
	}
}

2.백엔드

POST 방식 요청을 필수로 제한했습니다

@RequestMapping(value = "/checkUsername", method = RequestMethod.POST)
public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) {
	// 테스트
	System.out.println(extra);
	return !"test".equals(user.getUsername());
}

참조 문서: http://www.runoob.com/jquery/jquery-플러그인-validate.html

이jQuery Validate 플러그인의 AJAX 방식으로 입력 값을 검증하는 예제는 저가 모두 공유한 내용입니다. 많은 참고가 되길 바라며, 많은 지지를 부탁드립니다. 노래教程.

언급: 본 내용은 인터넷에서 가져왔으며, 원저자에게 속합니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반 내용을 발견하면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 기타 증거를 제공하여 신고하시면, 사이트는 즉시 위반 내용을 삭제합니다.