jQuery Validateプラグインのajaxメソッドを使用して入力値を確認する例

プロジェクトではよく、ユーザー名やユーザーアカウントが存在するかどうかなどのバックエンドの確認が必要な問題が発生します。jQuery Validateプラグインを使用して、remote確認ルールを完了して確認を行うことができます。

示例：

一.基本用法

1.需要验证的表单

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

2.js

remote検証ルールを使用する場合、最もシンプルで強引な書き方はremote: urlです。この場合、リクエストのURLの後ろに現在の確認値が自動的に結合されます。以下の例では、リクエストのURLはxxxです：/checkUsername.do&63;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) {
	// テスト
	return !"test".equals(username);
}

(2).Stringを返します

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

二.他の使い方

上記の使い方は実際の要件を満たさない場合があります。他のパラメータやパラメータ名と属性名が異なる場合、または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.バックエンド

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-プラグイン-validate.html

このjQuery Validateプラグインのajax方式での入力値検証の例が、編集者が皆さんに提供した全ての内容です。皆さんに参考になれば幸いです。また、呐喊チュートリアルを多くのサポートをお願いします。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容がある場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れた場合、本サイトは即座に侵害を疑われるコンテンツを削除します。）