Comment le plug-in Validate de jQuery valide les valeurs d'entrée

Cette fois, je vais vous montrer comment le plug-in Validate de jQuery vérifie la valeur d'entrée. Quelles sont les précautions pour que le plug-in Validate de jQuery vérifie la valeur d'entrée. Ce qui suit est un cas pratique, voyons. jetez un oeil.

L'éditeur suivant partagera 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. Suivons l'éditeur et jetons un coup d'œil

Dans les projets, nous rencontrons souvent des problèmes qui nécessitent une vérification des antécédents, comme 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 distante : url, qui se trouve derrière le. URL demandée. Épisser automatiquement la valeur actuellement vérifiée, par exemple, comme écrit ci-dessous, 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: "用户名已经存在"
			}
		}
	});
});

3. )

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

(1). Retour booléen

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

(2) Chaîne de retour

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

2. Autres utilisationsL'utilisation ci-dessus ne peut pas répondre aux besoins réels. Parfois, il est 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.

1.js

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

Le 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 le nom d'utilisateur dans l'exemple ci-dessous : xxx. être soumis en paramètre par défaut

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

2 Backend

Liminé aux requêtes POST

Je crois que vous maîtrisez le méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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

Lecture recommandée :

Comment convertir automatiquement les lettres majuscules et minuscules lorsque Jackson analyse les chaînes json

Après la requête ajax pour les données d'arrière-plan est réussi Comment gérer l'absence de réflexion

Utilisation du panneau accordéon jQuery EasyUI

Utilisation des onglets dans jQuery Panneau d'onglets EasyUI

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!