jQuery의 유효성 검사 플러그인이 입력 값의 유효성을 검사하는 방법

이번에는 jQuery의 Validate 플러그인이 입력값을 검증하는 방법을 보여드리겠습니다. 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 테스트)

backend 응답은 true 또는 false만 출력할 수 있으며 다른 데이터를 가질 수 없습니다. true: 확인 통과, false: 확인 실패. 반환 유형을 부울 또는 String

으로 설정할 수 있습니다.

(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 옵션을 사용하세요.

제출된 데이터는 함수에 의해 반환되어야 하는데, 값을 직접 쓰는 데 문제가 있습니다.

Default 현재 검증된 값이 제출됩니다. 다음 예에서는 사용자 이름이 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());
}

이 글의 사례를 읽으신 후 마스터하셨을 거라 생각합니다. 더 흥미로운 방법을 알고 싶다면 PHP의 다른 관련 글을 참고하세요. 중국사이트!

추천 자료:

jackson이 json 문자열을 구문 분석할 때 대문자와 소문자를 자동으로 변환하는 방법

배경 데이터에 대한 Ajax 요청이 성공한 후 반영이 없는 경우 해야 할 일

jQuery EasyUI 사용 접이식 패널

jQuery EasyUI 탭 패널에서 탭 사용

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