jQuery에서 Validate 플러그인을 사용하는 방법

아래에서는 ajax 모드에서 입력 값을 확인하기 위해 jQuery Validate 플러그인을 사용하는 예를 공유하겠습니다. 좋은 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

프로젝트에서 사용자 이름과 사용자 계정이 존재하는지 등 백그라운드 확인이 필요한 문제에 자주 직면합니다. 원격 확인 규칙을 사용하여 확인을 완료하려면 jQuery Validate 플러그인을 사용하세요.

예:

1. 기본 사용법

1. 확인이 필요한 양식

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

2.js

가장 간단하고 투박한 방법을 사용하세요. 이때 요청된 URL은 현재 확인된 값과 자동으로 연결됩니다. 예를 들어 다음 작성에서 요청된 URL은 xxx/checkUsername.do?username=test

// 导入jquery、validte库略
$(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: 확인 실패. 반환 유형을 부울 또는 문자열로 설정할 수 있습니다

( 1) 부울 반환

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

(2) 반환 문자열

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

2. 기타 사용법

위의 사용법이 실제 요구 사항을 충족할 수 없는 경우도 있습니다. 일관성이 없거나 요청 방법이 POST입니다.

1 .js

jQuery의 $.ajax({...})가 작성되는 방식인 data 옵션을 사용합니다. 제출된 데이터는 함수에 의해 반환되어야 하는데 값을 직접 작성하는 데 문제가 있습니다.

기본적으로 제출됩니다. 현재 검증된 값, 아래 예의 사용자 이름: 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());
}

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

bootstrap-table.js를 사용하여 확장된 페이징 도구 모음 기능 구현에 대해

JS에서 부동 충돌을 구현하는 방법

JS에서 버튼 클릭을 거부하도록 마우스를 제어하는 ​​방법

위 내용은 jQuery에서 Validate 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!