jQuery Validate插件ajax方式验证输入值的实例

Nel progetto si incontrano spesso problemi di validazione in background, come se il nome utente o l'account utente esistono. Utilizzando l'estensione jQuery Validate è possibile completare la validazione con la regola di validazione remota.

Esempio:

I. Uso di base

1. Modulo di form da validare

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

2.js

L'uso della regola di validazione remota, la scrittura più semplice e diretta è remote: url, in questo caso l'URL della richiesta viene automaticamente concatenato con il valore di validazione corrente, ad esempio, nel seguente modo, l'URL della richiesta è: 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",    // Modalità di invio dei dati
		dataType: "json",   // Formato dei dati accettati 
		data: {      // Dati da trasmettere
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "informazioni aggiuntive";
			}
		 }
	}
}

2. Backend

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

Articolo di riferimento: http://www.runoob.com/jquery/jquery-plugin-validate.html

Questa è l'intera istanza di verifica dell'input tramite AJAX del plugin jQuery Validate che ho condiviso con voi, spero che possa essere utile a tutti e che tutti possano sostenere la guida di urlaohao.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta agli autori originali, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente il contenuto sospetto di copyright.