Ejemplo de validación de entrada mediante AJAX del plugin jQuery Validate

En proyectos, a menudo se enfrentan a problemas que requieren validación en el backend, como si el nombre de usuario o la cuenta de usuario existen. Al usar el complemento jQuery Validate, se puede completar la validación con la regla de validación remota.

Ejemplo:

I. Uso básico

1.requiere validación de formulario

<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) {
	// Prueba
	return !"test".equals(username);
}

(2).返回String

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

二.其他用法

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

1.js

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

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

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

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //método de envío de datos
		dataType: "json",   //formato de datos recibidos 
		data: {      //datos a transmitir
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "información adicional";
			}
		 }
	}
}

2.backend

se limita a solicitudes de tipo POST

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

Artículo de referencia: http://www.runoob.com/jquery/jquery-plugin-validate.html

La instancia de verificación de entrada en modo AJAX del complemento jQuery Validate que se presenta a continuación es todo lo que el editor comparte con ustedes, esperando que les sirva de referencia y que todos nos apoyen en el tutorial de gritos.

Declaración: el contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido ha sido contribuido y subido por usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por los litigios relacionados. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @ para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)