مثال على التحقق من المدخلات باستخدام jQuery Validate عن طريق طريقة AJAX

يُواجه المطورون في المشاريع عادةً مشاكل التحقق من الخلفية، مثل وجود اسم المستخدم أو حساب المستخدم. يمكن استخدام مكتبة jQuery Validate لإنجاز التحقق باستخدام قاعدة التحقق remote.

مثال:

أ. الاستخدام الأساسي

1. النموذج الذي يجب التحقق منه

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

2.js

استخدام قاعدة التحقق remote، أكثر الطرق بسيطة وقاسية هي remote: 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. الخلفية (اختبار 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";
}

القسم الثاني: الاستخدامات الأخرى

استخدام الطريقة السابقة لا يمكنه تلبية الحاجة الفعلية، أحيانًا قد تحتاج إلى تقديم معاملات أخرى أو أن تكون أسماء المعاملات وأسماء الخصائص غير متطابقة أو طريقة الطلب 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-plugin-validate.html

هذا المثال على طريقة التحقق من إدخال jQuery Validate plugin via AJAX هو كل محتوى الذي أشاركه معكم، أتمنى أن يكون هذا مرجعًا لكم، وأتمنى أيضًا أن تدعموا تعليمات النفخ.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق النشر، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت الذين يقدمون المساهمات بشكل متعمد ويتم تحميلها، لا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت محتوى مخالف للحقوق النشرية، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وقدم الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم عن حقوق النشر فور التحقق منه.