How jQuery's Validate plug-in validates input values

This time I will show you how jQuery's Validate plug-in verifies the input value. What are the precautions for jQuery's Validate plug-in to verify the input value. The following is a practical case, let's take a look.

The editor below 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. Let’s follow the editor and take a look.

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; 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 Sometimes 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 is the writing method of jQuery's $.ajax({...});

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

Default The current verified value will be submitted, which is the username in the following example: xxx 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

is restricted to the POST method Request

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to automatically convert uppercase and lowercase letters when jackson parses a json string

After the ajax request for background data is successful How to deal with no reflection

Usage of jQuery EasyUI accordion panel

Use of tabs in jQuery EasyUI tab panel

The above is the detailed content of How jQuery's Validate plug-in validates input values. For more information, please follow other related articles on the PHP Chinese website!