Пример проверки ввода с помощью jQuery Validate через ajax

В проектах часто встречаются проблемы, требующие проверки на сервере, такие как существует ли имя пользователя, существует ли учетная запись пользователя и т.д. Используя плагин jQuery Validate, можно выполнить проверку с помощью правила проверки remote.

Пример:

I. Основные правила использования

1. Форма, подлежащая проверке

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

2.js

Использование правила проверки remote, наиболее простым и грубым способом является remote: url, в этом случае URL запроса автоматически добавляет текущее значение проверки, например, в следующем примере, URL запроса составляет: xxx/checkUsername.do?username=test

// Пропуск импорта jquery, validate библиотеки}
$(function() {
	$.validator.setDefaults({
		submitHandler: function(form) {
			// Обработка успешной проверки
			...
		}
	});
	$("#registForm").validate({
		rules: {
			username: {
				required: true,,
				remote: "checkUsername.do"
			},			
		},
		messages: {
			username: {
				required: "Имя пользователя не может быть пустым",
				remote: "Пользователь с таким именем уже существует"
			}
		}
	});
});

3. Backend (тестирование Spring MVC)

ответ сервера может быть только true или false, не должно быть других данных; true: проверка успешна, false: проверка не успешна; можно установить тип возвращаемого значения как boolean или String

(1). Возврат boolean

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

(2). Возврат String

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

2. Другие методы использования

прежде всего, использование этого метода не всегда удовлетворяет реальным потребностям; иногда может потребоваться отправка других параметров, параметры и имена свойств могут не совпадать, или способ запроса будет POST, стиль записи будет следующим:

1.js

используйте опцию data, то есть стиль записи jQuery $.ajax({...});

отправленные данные необходимо передавать через возвращаемое значение функции; прямое写入 значения проблематично;

по умолчанию будет отправлено текущее проверяемое значение, то есть username: xxx будет отправлен по умолчанию в качестве параметра

....
username: {
	required: true,,
	remote: {
		url: "checkUsername.do",
		type: "post",    // способ отправки данных
		dataType: "json",   // формат принимаемых данных 
		data: {      // данные, которые нужно передать
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "дополнительная информация";
			}
		 }
	}
}

2. Backend

ограничено только способ запроса POST

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

См. также: http://www.runoob.com/jquery/jquery-plugin-validate.html

Вот и все, что я хочу поделиться с вами о примере проверки ввода с помощью плагина jQuery Validate, используя метод AJAX. Надеюсь, это даст вам некоторое представление, и я希望大家多多支持呐喊教程。

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, самостоятельно загружен, сайт не обладает правами собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. Если нарушение будет подтверждено, сайт немедленно удалит涉嫌侵权的内容。