Exemple de validation des valeurs d'entrée par l'intermédiaire de l'ajax du plugin jQuery Validate

Dans les projets, on rencontre souvent des problèmes de validation en arrière-plan, comme l'existence du nom d'utilisateur, du compte utilisateur, etc. L'extension jQuery Validate peut utiliser la règle de validation à distance pour effectuer la validation.

Exemple :

I. Utilisation de base

1.formulaire à valider

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

2.js

使用remote校验规则，最简单粗暴的写法是remote: url，此时请求的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：验证失败；设置返回类型为boolean或String都可以

(1).返回boolean

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

(2).返回String

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

二.其他用法

上面的用法不能满足实际的需求，有时候会有需要提交其他参数、参数名和属性名不一致或请求方式为POST的情况，写法如下：

1.js

使用data选项，也就是jQuery的$.ajax({...})的写法；

提交的数据需要通过函数返回值的方式，直接写值有问题；

默认会提交当前验证的值，也就是下例中的 username: xxx会被默认作为参数提交

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //Méthode d'envoi des données
		dataType: "json",   //Format des données reçues 
		data: {      //Données à transmettre
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "Informations supplémentaires";
			}
		 }
	}
}

2.后台

a limité les requêtes obligatoires au mode POST

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

Article de référence : http://www.runoob.com/jquery/jquery-plugin-validate.html

Cet exemple de validation d'entrée AJAX du plugin jQuery Validate que je partage avec vous est tout ce que j'ai à partager. J'espère que cela vous donnera une idée et que vous soutiendrez également le tutoriel de cri.

Déclaration : le contenu de cet article est tiré d'Internet, propriété intellectuelle de son auteur. Le contenu est apporté par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation des droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (au moment de l'envoi d'un e-mail, veuillez remplacer # par @ pour signaler une infraction et fournir des preuves. Une fois vérifié, ce site supprimera immédiatement le contenu suspect d'infraction aux droits d'auteur.)