Beispiel zur Validierung von Eingabewerten mit jQuery Validate Plugin über AJAX

Im Projekt tritt oft die Notwendigkeit auf, Backend-Validierung durchzuführen, wie z.B. die Existenz von Benutzername, Benutzerkonto usw. Mit dem jQuery Validate-Plugin kann die Validierung durch die Remote-Validierungsregel abgeschlossen werden.

Beispiel:

1. Grundlegendes Verhalten

1.zu verifizierende Formulare

<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) {
	// 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",    //Art der Datenübermittlung
		dataType: "json",   //Datenformat der Annahme 
		data: {      //Zu übertragende Daten
			username: function() {
				return $("#username").val();
			
			extra: function() {
				return "Zusätzliche Informationen";
			
		 
	

2.Backend

erfordert eine Anfrage im POST-Verfahren

@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());

Referenzartikel: http://www.runoob.com/jquery/jquery-plugin-validate.html

Dieser Beispielcode für die Validierung von Eingaben in Ajax-Weise mit dem jQuery Validate-Plugin ist alles, was der Autor weitergegeben hat. Ich hoffe, es kann Ihnen als Referenz dienen und ich hoffe, dass Sie die呐喊教程 weiter unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für relevante rechtliche Verpflichtungen. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald die Beanstandung bestätigt wird, wird die Website die涉嫌侵权的内容立即删除。)