jQueryでValidateプラグインを使用する方法

以下に、ajax モードで入力値を検証するための jQuery Validate プラグインの使用例を共有します。これには優れた参考値があり、皆さんに役立つことを願っています。

プロジェクトでは、ユーザー名やユーザーアカウントが存在するかどうかなど、バックグラウンド検証が必要な問題が頻繁に発生します。 jQuery Validate プラグインを使用して、リモート検証ルールを使用した検証を完了します。

例:

1. 基本的な使い方

1. 検証が必要なフォーム

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

2.js

を使用する最も単純で大雑把な書き方。このとき、リクエストされた 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 テスト)

backend レスポンスは true または false のみを出力でき、他のデータを含めることはできません。 true: 検証に成功、false: 検証に失敗しました。戻り値の型は boolean または String に設定できます。 1). boolean

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

(2)を返します。Return String

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

2. その他の使用方法 場合によっては、他のパラメータ、パラメータ名、属性名を送信する必要があります。一貫性がないか、リクエストメソッドが POST である場合、その記述は次のとおりです。

1 .js

jQuery の $.ajax({...}) の記述方法です。送信されたデータは関数によって返される必要があり、値を直接記述する場合には問題があります

デフォルトで送信されます 現在検証されている値 (以下の例ではユーザー名): 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());
}

上記は、将来的に皆様のお役に立てば幸いです。

関連記事:

bootstrap-table.jsを使用した拡張ページングツールバー機能の実装について

JSでフローティングコリジョンを実装する方法

JSでボタンのクリックを拒否するマウス制御方法

以上がjQueryでValidateプラグインを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。