jQuery の Validate プラグインが入力値を検証する方法

今回は、jQuery の Validate プラグインが入力値を検証する方法について説明します。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). String を返します

場合によっては、上記の使用法では、他のパラメータ、パラメータ名を送信する必要があります。属性名が一致していない、またはリクエストメソッドが POST である場合、記述は次のようになります: 1.js

jQuery の $.ajax({...}) の記述方法です。

送信されたデータは関数によって返される必要があり、値を直接記述すると問題があります。 デフォルト 現在検証されている値が送信されます。これは、次の例ではユーザー名です: xxx はパラメータとして送信されます。デフォルトでは

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

2. バックグラウンド

はリクエストをPOSTメソッドに制限します

....
username: {
	required: true,
	remote: {
		url: "checkUsername.do",
		type: "post",    //数据发送方式
		dataType: "json",   //接受数据格式 
		data: {      //要传递的数据
			username: function() {
				return $("#username").val();
			},
			extra: function() {
				return "额外信息";
			}
		 }
	}
}

この記事のケースを読んだ後はそれをマスターしたと思います。さらにエキサイティングな方法については、phpの他の関連記事に注目してください。中国語のサイトです！ 推奨読書:

ジャクソンがJSON文字列を解析するときに大文字と小文字を自動的に変換する方法

バックグラウンドデータのAjaxリクエストが成功した後に反映されない場合の対処方法

jQuery EasyUIの使用折りたたみパネル

jQuery EasyUI タブパネルのタブの使用法

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