How to use Validate plugin in jQuery

Below I will share with you an example of the jQuery Validate plug-in ajax method for validating input values. It has a good reference value and I hope it will be helpful to everyone.

In projects, we often encounter problems that require background verification, such as whether the user name and user account exist, etc. Use the jQuery Validate plug-in to complete verification using remote verification rules.

Example:

1. Basic usage

1. Need to verify Form

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

2.js

Use remote verification rules. The simplest and crudest way to write it is remote: url. At this time, the requested url is automatically spliced. The current verified value, for example, the following writing method, the requested url is: 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. Background (Spring MVC test)

The background response can only output true or false, and cannot have other data. true: verification passed, false: verification failed; you can set the return type to boolean or String

(1). Return boolean

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

(2). Return String

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

2. Other usage

The above usage cannot meet the actual needs, and sometimes If you need to submit other parameters, the parameter name and attribute name are inconsistent, or the request method is POST, the writing method is as follows:

1.js

Use the data option, which is jQuery The writing method of $.ajax({...});

The submitted data needs to be returned by the function, and there is a problem with writing the value directly;

The current verified value will be submitted by default , that is, username: xxx in the following example will be submitted as a parameter by default

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //数据发送方式
		dataType: "json",   //接受数据格式 
		data: {      //要传递的数据
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "额外信息";
			}
		 }
	}
}

2. The background

restricts the request to POST method

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About using bootstrap-table.js to implement extended paging toolbar function

How to implement floating collision in JS

How to control the mouse to refuse to click the button in JS

The above is the detailed content of How to use Validate plugin in jQuery. For more information, please follow other related articles on the PHP Chinese website!