Exemplo de validação de entrada com ajax no plugin jQuery Validate

Em projetos, é comum encontrar problemas que requerem verificação no backend, como se o nome de usuário ou a conta de usuário existem. Usando o plug-in jQuery Validate, é possível completar a verificação com a regra de validação remota.

Exemplo:

1. Uso básico

1.Formulários a serem verificados

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

2.js

Use a regra de validação remota, a forma mais simples e bruta é remote: url, neste momento, o url da solicitação é automaticamente concatenado com o valor de validação atual, por exemplo, a seguinte forma, o url da solicitação é: xxx/checkUsername.do&63;username=test

// Importação de jquery, validte omitida
$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// Tratamento de verificação bem-sucedida
			...
		}
	});
	$("#registForm").validate({
		rules: {
			username: {
				required: true,
				remote: "checkUsername.do"
			},			
		},
		messages: {
			username: {
				required: "O nome de usuário não pode estar vazio",
				remote: "O nome de usuário já existe"
			}
		}
	});
});

3.Backend (Teste Spring MVC)

A resposta do servidor backend pode apenas retornar true ou false, não pode haver outros dados, true: verificação bem-sucedida, false: falha na verificação; pode ser configurado o tipo de retorno como boolean ou String

(1).Retorna boolean

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

(2).Retorna String

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

II. Outras utilizações

Esta forma de uso não atende às necessidades reais, às vezes há a necessidade de submeter outros parâmetros, nomes de parâmetros e nomes de atributos não coincidentes ou métodos de solicitação POST, a escrita é como follows:

1.js

Use a opção data, que é a forma de escrita de jQuery $.ajax({...});

Os dados submetidos precisam ser retornados por meio de valores de função, é problemático escrever diretamente valores;

O valor padrão será submetido, ou seja, o username: xxx será submetido como parâmetro padrão

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //Método de envio de dados
		dataType: "json",   //Formato de dados a ser recebido 
		data: {      //Os dados a serem transmitidos
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "informações adicionais";
			}
		 }
	}
}

2.backend

Restringiu que deve ser uma solicitação de método POST

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

Referência de artigo: http://www.runoob.com/jquery/jquery-plugin-validate.html

Este exemplo de validação de entrada AJAX do plugin jQuery Validate que o editor compartilhou é tudo o que temos a oferecer. Esperamos que isso sirva como uma referência para vocês e que vocês apoiem o tutorial Yell.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)