How jQuery's Validate plug-in validates input values-JS Tutorial-php.cn

How jQuery's Validate plug-in validates input values

php中世界最好的语言

Release： 2018-03-15 14:45:43

Original

1689 people have browsed it

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>

Copy after login

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: "用户名已经存在"
			}
		}
	});
});

Copy after login

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);
}

Copy after login

(2). Return String

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

Copy after login

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 "额外信息";
			}
		 }
	}
}

Copy after login

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());
}

Copy after login

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!