مسج التحقق من صحة

مكتبة استيراد شبيبة (باستخدام هذا البرنامج التعليمي كندي)

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

قواعد التحقق من صحة الافتراضية

افتراضي نصائح

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date ( ISO ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	maxlength: $.validator.format( "Please enter no more than {0} characters." ),
	minlength: $.validator.format( "Please enter at least {0} characters." ),
	rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
	range: $.validator.format( "Please enter a value between {0} and {1}." ),
	max: $.validator.format( "Please enter a value less than or equal to {0}." ),
	min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

يوفر مسج التحقق من صحة نصائح حزمة المعلومات الصينية، وتقع في تحميل حزمة حي / التعريب / messages_zh.js، تنص على ما يلي:

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhongwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	maxlength: $.validator.format("最多可以输入 {0} 个字符"),
	minlength: $.validator.format("最少要输入 {0} 个字符"),
	rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
	range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
	max: $.validator.format("请输入不大于 {0} 的数值"),
	min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

يمكنك إضفاء الطابع المحلي على ملف المعلومات شعبة نظم / التعريب / messages_zh.js قدم إلى الصفحة:

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

استعمال

1، وتحكم قواعد التحقق من صحة مكتوبة

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

محاولة »

2، رمز شبيبة قواعد التحقق من صحة مكتوبة

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

الرسائل في عنصر تحكم إذا لم يكن هناك رسالة، سوف تستخدم المعلومات الافتراضية

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

محاولة »

مطلوب: القيمة الحقيقيةأمر لا بد منه.
مطلوب: "#AA: فحص" هو تعبير عن صحيح، تحتاج إلى التحقق.
مطلوب: وظيفة () {} العودة الحقيقية، عن الحاجة للتحقق منها.

اثنين تستخدم عادة في الجزء الخلفي، في شكل بحاجة لملء أم لا شغل العناصر.

الطرق الشائعة والاهتمام بقضايا

1، واستبدال ذلك بتقديم الافتراضي

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

طريقة لاستخدام اياكس

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

يمكنك تعيين القيم الافتراضية التحقق من صحة تنص على ما يلي:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

إذا كنت تريد إرسال النموذج، تحتاج إلى استخدام form.submit ()، بدلا من $ (النموذج) .submit ().

2 والتصحيح، والتحقق لا تقدم سوى شكل

إذا كانت هذه المعلمة الحقيقية، ومن ثم لم تقدم النموذج، قامت فقط بالتحقق خارج، وأنها مريحة للغاية عند التصحيح.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

إذا كانت الصفحة تحتوي على أشكال متعددة ترغب في تعيين لتصحيح، استخدام:

$.validator.setDefaults({
   debug: true
})

3، تجاهل: تجاهل بعض العناصر لم يتم التحقق

ignore: ".ignore"

4. تغيير موقع الرسالة الخطأ المعروضة

errorPlacement：Callback

تشير إلى موقع غير محله، الافتراضي هو: error.appendTo (element.parent ())، وهذا هو رسالة خاطئة وراء عنصر المصادقة.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

أمثلة

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

محاولة »

دور القانون هو: في ظل الظروف العادية يتم عرض رسالة الخطأ في <الدرجة TD = "المركز"> </ td> إذا تم عرض الراديو في <td> </ td>، إذا تم عرض مربع في محتوى وراء.

عادة ما تكون هذه السمات الثلاث في وقت واحد، لتحقيق عرض جميع الوظائف خطأ في وعاء، ومخفية أي معلومات تلقائيا.

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5، تغيير نمط الرسالة الخطأ المعروضة

تحديد الخطأ من نمط، يمكنك زيادة يتم عرض رمز، ونظام أنشأت validation.css، وتهدف إلى الحفاظ على أسلوب الوثيقة التحقق.

input.error {الحدود: الأحمر الصلبة 1PX؛}
label.error {
  خلفية: رابط ( "./ تجريبي / صور / unchecked.gif") عدم تكرار 0px 0px؛

  الحشو اليسرى: 16px؛

  الحشو القاع: 2px؛

  الخط الوزن: جريئة؛

  اللون: # EA5200.
}
label.checked {
  خلفية: رابط ( "./ تجريبي / صور / checked.gif") عدم تكرار 0px 0px؛
}

6، يتم التحقق من كل حقل عن طريق أداء وظيفة

 نجاح: سلسلة الاستدعاء 

للتحقق من أن عناصر من العملية بعد التحقق، إذا تليها سلسلة من شأنها أن تعامل على أنها فئة المغلق، ولكن أيضا مع وظيفة.

نجاح: وظيفة (التسمية) {
    // مجموعة & نبسب؛ كنص لشركة آي إي
    label.html ( "& نبسب؛"). addClass ( "فحص")؛
    //label.addClass("valid").text("Ok! ")
}

إضافة "صالح" للتحقق من العناصر المحددة في النمط المغلق <نمط> label.valid {} </ النمط>.

نجاح: "صالح"

7، تعديل التحقق من صحة الزناد

وأضاف خلاف ذلك تجميد على الرغم من أن يلي هو منطقية، ولكنها أوصت إلا إذا كنت تريد كاذبة.

// إعادة تعيين شكل $ (). استعداد (وظيفة () {
 فار المصادقة = $ ( "# signupForm"). تحقق من صحة ({
        submitHandler: وظيفة (النموذج) {
            تنبيه ( "المقدمة")؛   
            form.submit ()؛
        }    
    })؛
    $ ( "# إعادة تعيين"). انقر (وظيفة () {
        validator.resetForm ()؛
    })؛

})؛

8 والتحقق غير متزامن

 بعد: URL 

طريقة المصادقة باستخدام اياكس، المقدمة إلى القيمة الافتراضية الحالية إلى التحقق من عنوان بعيد، إذا لزم الأمر لتقديم القيم الأخرى، يمكنك استخدام الخيار البيانات.

 جهاز التحكم عن بعد: "الاختيار email.php" 

جهاز التحكم عن بعد: {
    رابط: "الاختيار email.php"، // نوع التخزين المؤقت: "ما بعد"، // وضع نقل البيانات نوع البيانات: "سلمان"، // استقبال البيانات تنسيق البيانات: {بيانات اسم المستخدم // لتمريرها: وظيفة ( ) {
            العودة $ ( "# اسم المستخدم") فال ()؛
        }
    }
}

عنوان بعيد الانتاج فقط "صحيح" أو "كاذبة"، لا يمكن أن يكون الإخراج الأخرى.

9، مشيرا الى التحقق من صحة مخصصة

 addMethod: اسم أو أسلوب الرسالة 

أساليب المصادقة المخصصة

// حرفين بايت jQuery.validator.addMethod ( "byteRangeLength"، وظيفة (قيمة العنصر، المعلمة) {
    طول فار = value.length.
    ل(فار ط = 0؛ ط <value.length، وأنا ++) {
        إذا (value.charCodeAt (ط)> 127) {
            طول ++؛
        }
    }
  العودة this.optional (عنصر) || (طول> = المعلمة [0] && طول <= المعلمة [1])؛   
}، $ .validator.format ( "تأكد من أن القيمة دخلت في {0} - {1} بين بايت (حرف بايت واحد عد 2)"))؛

// التحقق الرمز البريدي jQuery.validator.addMethod ( "isZipCode"، وظيفة (قيمة عنصر) {   
    فار الهاتف = / ^ [0-9] {6} $ /.
    العودة this.optional (عنصر) || (tel.test (القيمة))؛
} "الرجاء ملء الصحيح الرمز البريدي الخاص بك")؛

ملاحظة: لإضافة ملف إضافي-methods.js أو إضافة ملف jquery.validate.js.توصيات مكتوبة بشكل عام في ملف إضافي-methods.js.

ملاحظة: ملف messages_cn.js، إضافة: isZipCode: "يمكن أن تشمل النص والحروف والأرقام والشرطات السفلية."قبل استدعاء لإضافة مراجع ملف إضافي-methods.js.

10 والإذاعة ومربع، حدد التحقق

الراديو يجب اختيار التمثيل المطلوبة.

<نوع الإدخال = "الراديو" معرف = "gender_male" قيمة = "م" اسم = "نوع الجنس" المطلوبة />
<نوع الإدخال = "الراديو" معرف = "gender_female" قيمة = "و" اسم = "نوع الجنس" />

مربع يجب اختيار التمثيل المطلوبة.

<نوع الإدخال = "مربع" الطبقة = "مربع" معرف = "توافق" اسم = "توافق" المطلوبة />

يمثل الحد الأدنى لعدد مربع MINLENGTH يجب أن يتم التحقق، MAXLENGTH يمثل الحد الأقصى المحدد، rangelength: [2،3] يمثل عدد من النطاق المحدد.

<نوع الإدخال = "مربع" الطبقة = "مربع" معرف = "spam_email" قيمة = "البريد الالكتروني" اسم = "سبام []" مطلوب MINLENGTH = "2" />
<نوع الإدخال = "مربع" الطبقة = "مربع" معرف = "spam_phone" قيمة = "الهاتف" اسم = "سبام []" />
<نوع الإدخال = "مربع" الطبقة = "مربع" معرف = قيمة "spam_mail" = "البريد الإلكتروني" اسم = "سبام []" />

حدد المطلوب تظهر القيمة المحددة لا يمكن أن يكون فارغا.

<تحديد هوية = "الغابة" اسم = "الغابة" عنوان = "الرجاء تحديد شيء!" مطلوب>
    <قيمة الخيار = ""> </ خيار>
    <قيمة الخيار = "1"> بوغا </ خيار>
    <قيمة الخيار = "2"> باجا </ خيار>
    <قيمة الخيار = "3"> أوي </ خيار>
</ تحديد>

حدد اختيار التمثيل MINLENGTH الحد الأدنى من عدد (الاختيار من متعدد من اختيار)، يمثل MAXLENGTH الحد الأقصى المحدد، rangelength: [2،3] يمثل عدد الفاصل الزمني المحدد.

<تحديد هوية = "فاكهة" اسم = "فاكهة" عنوان = "يرجى تحديد اثنين على الأقل من الفواكه" الطبقة = "{المطلوبة: صحيح، MINLENGTH: 2}" متعددة = "متعددة">
    <الخيار قيمة = "ب"> الموز </ خيار>
    <الخيار قيمة = "أ"> أبل </ خيار>
    <الخيار قيمة = "ع"> الخوخ </ خيار>
    <الخيار قيمة = "تي"> السلاحف </ خيار>
</ تحديد>

API الصيني jQuery.validate

المصادقة

التحقق من صحة الأسلوب بإرجاع كائن المصادقة. كائن مدقق لديه العديد من الطرق التي يمكن استخدامها لتحريك عملية المعايرة أو تغيير محتويات النموذج، يتم سرد العديد من الطرق التي يشيع استخدامها أدناه.

المدمج في التوثيق

التحقق من صحة () هو اختياري

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})

addMethod (الاسم، طريقة، الرسالة) طريقة

اسم المعلمات هو اسم الأسلوب إضافة.

طريقة المعلمة هي وظيفة التي تأخذ المعلمات الثلاث (قيمة العنصر، المعلمة).
القيمة هي قيمة العنصر، عنصر هو العنصر نفسه، المعلمة هو المعلمة.

يمكننا استخدام addMethod لإضافة باستثناء أسلوب المصادقة طريقة التحقق من صحة المضمنة. على سبيل المثال، هناك مجال، إلا أن تفقد الرسالة، والنطاق بالعربية، مكتوبة على النحو التالي:

$ .validator.addMethod ( "آف"، وظيفة (قيمة العنصر، بارامس) {  
	إذا (value.length> 1) {
		عودة كاذبة.
	}
    إذا (القيمة => بارامس [0] && قيمة <= بارامس [1]) {
		العودة الحقيقية.
	} {شيء آخر
		عودة كاذبة.
	}
}، "يجب أن يكون بريد إلكتروني، وبالعربية")؛

إذا كان هناك حقل نموذج معرف = "اسم المستخدم"، وكتب في القواعد:

اسم المستخدم: {
   بالعربية: [ "أ"، "و"]
}

AddMethod المعلمة الأولى هو اسم أسلوب المصادقة إلى إضافة، ثم هو بالعربية.
addMethod المعلمة الثالثة، رسالة خطأ مخصصة، مما يشير هنا هو: "يجب أن يكون رسالة، وبالعربية".
addMethod المعلمة الثانية هي وظيفة، وهذا هو الأهم، وصياغة قرار استخدام هذا الأسلوب من التحقق.

إذا معلمة واحدة فقط، والكتابة مباشرة، مثل بالعربية: "أ"، ثم وهذا هو معلمة فريدة من نوعها، إذا هو مكتوب المعلمة أكثر من واحد في []، مفصولة بفواصل.

وضع سلسلة ميتا

$ ( "# Myform"). التحقق من صحة ({

   الفوقية: "صحة"،

   submitHandler: وظيفة () { 
تنبيه ( "مقدم!")}

})

<سيناريو نوع = "نص / جافا سكريبت" 
SRC = "شبيبة / jquery.metadata.js"> </ script>

<سيناريو نوع = "نص / جافا سكريبت" 
SRC = "شبيبة / jquery.validate.js"> </ script>

<نموذج معرف = "myform">

  <إدخال نوع = "نص" 
اسم = "البريد الإلكتروني" الطبقة = "{التحقق: {المطلوبة: صحيح، والبريد الإلكتروني: صحيح}}" />

  <نوع الإدخال = "تقديم" 
القيمة = "إرسال" />

</ النموذج>

أمثلة تجريبي

أمثلة خيالية

• خطأ حاوية رسالة
• رسالة مخصصة كعنصر البيانات
• راديو (أزرار)، مربع (زر الاختيار) واختر (المنسدلة مربع)
• شكل تفاعلي (نموذج) وقابس (أجاكس تقديم)
• طرق مخصصة وعرض رسالة
• أشكال ديناميكية
• استخدام مسج واجهة المستخدم شكل رولر مخصصة شكل النمط
• محرر TinyMCE - خفيفة الوزن متصفح القائمة على محرر WYSIWYG
• مربع ملف الإدخال
• مسج موبايل مصادقة النماذج

أمثلة من العالم الحقيقي

• استمارة التسجيل الحليب
• استمارة التسجيل Marketo
• الإسكان بيع شكل لوحة قابلة للطي
• CAPTCHA عن بعد (PIN) التحقق

أمثلة تحميل

تحميل حالات الرسمية