Comment utiliser le plugin Validate dans jQuery

Ci-dessous, je vais partager avec vous un exemple de la méthode ajax du plug-in jQuery Validate pour valider les valeurs d'entrée. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Dans les projets, nous rencontrons souvent des problèmes qui nécessitent une vérification des antécédents, comme par exemple si le nom d'utilisateur et le compte utilisateur existent, etc. Utilisez le plug-in jQuery Validate pour effectuer la vérification à l'aide de règles de vérification à distance.

Exemple :

1. Utilisation de base

1. Le formulaire

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

2.js

utilise des règles de vérification à distance. La manière la plus simple et la plus grossière de l'écrire est à distance : url. après l'URL demandée Épisser automatiquement la valeur actuellement vérifiée, comme l'écriture suivante, l'URL demandée est : 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: "用户名已经存在"
			}
		}
	});
});

Arrière-plan (test Spring MVC) )

La réponse en arrière-plan ne peut afficher que vrai ou faux et ne peut pas contenir d'autres données true : vérification réussie, false : échec de la vérification ; vous pouvez définir le type de retour sur booléen ou String

(1).Renvoyer le booléen

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

(2).Renvoyer la chaîne

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

2. >L'utilisation ci-dessus ne peut pas Pour répondre aux besoins réels, il est parfois nécessaire de soumettre d'autres paramètres, les noms de paramètres et les noms d'attributs sont incohérents, ou la méthode de requête est POST. La méthode d'écriture est la suivante :

.

1.js

Utilisez l'option data, c'est ainsi que le $.ajax({...}) de jQuery est écrit

Les données soumises doivent être renvoyées ; par une fonction, et il y a un problème avec l'écriture directe de la valeur

La valeur vérifiée actuelle sera soumise par défaut, c'est-à-dire que le nom d'utilisateur : xxx dans l'exemple suivant sera soumis en tant que paramètre par défaut

2. L'arrière-plan

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

est restreint La requête doit être en méthode POST

Ce qui précède est ce que j'ai compilé pour tout le monde . J’espère que cela sera utile à tout le monde à l’avenir.

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

Articles connexes :

À propos de l'utilisation de bootstrap-table.js pour implémenter la fonction de barre d'outils de pagination étendue

Comment implémenter une collision flottante dans JS

Comment contrôler la souris pour refuser de cliquer sur le bouton en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!