jedi validate
v1.5.6
Jedi Validate هو مكون خفيف الوزن للتحقق من صحة النموذج.
هذه فئة JS ويمكنك إنشاء مثيل جديد عن طريق تمرير عنصر DOM وكائن الخيارات.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;افتراضيًا، سيتم إرسال النموذج عبر ajax مع المعلمات التي تم تعيينها في HTML.
نظرًا لأنه يوفر تنسيق json صارمًا للتفاعل، يمكنك إرسال نموذج بعدة طرق مختلفة:
لكن استجابة الخادم دائمًا لها بنية واحدة. إنه أسهل في التنفيذ.
إذا كنت ترغب في إنشاء كود المصدر، أو إجراء الاختبارات، أو المساهمة، فقم أولاً بتقسيم هذا الريبو أو استنساخه على جهازك المحلي. تأكد من تثبيت NodeJS وnpm. تحقق في المحطة باستخدام node -v و npm -v .
لتثبيت تبعيات المشروع، قم بالتشغيل أولاً،
npm install
لبناء المصدر ومراقبة التغييرات في التشغيل الطرفي،
npm run build
لتجميع المصدر وتقديمه إلى localhost:4000 ،
npm run dev
سيؤدي هذا إلى فتح خادم webpack المحلي حيث يمكنك الانتقال إلى الدليل أو المورد المطلوب. توجد صفحة الاختبار في example/bootstrap.html
لم تكتمل الاختبارات بعد وستحدث أخطاء وقت التشغيل عند محاولة إجراء الاختبارات في وحدة التحكم أو من خلال متصفح الاختبار.
هناك ثلاثة أنواع من الخيارات:
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} ضمن خيار ajax نحدد كيفية إرسال النموذج. يمكن أن يكون null إذا كنا لا نريد إرسال النموذج، أو يمكن أن يكون كائنًا يحتوي على الخيارات التالية:
الافتراضي: null يمكن تجاوزه من خلال سمة نموذج action أو خيارات init.
الافتراضي: يمكن تجاوز 'application/x-www-form-urlencoded' بواسطة سمة نموذج enctype أو خيارات init أو sendType .
الافتراضي: يمكن تجاوز 'GET' بواسطة سمة نموذج method أو خيارات init.
الافتراضي: 'serialize'
يمكنك تشفير البيانات وإرسالها بثلاث طرق مختلفة. الخيارات الصالحة هي:
'formData' - أرسل النموذج كـ FormData. 'Content-type' إلى 'multipart/form-data''json' - إرسال النموذج ككائن JSON. اضبط 'Content-type' على 'application/json; charset=utf-8''serialize' - إرسال النموذج كطلب عادي. اضبط 'Content-type' على 'application/x-www-form-urlencoded'لا يمكن إرسال الملفات إلا باستخدام ترميز "formData".
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }القواعد المستخدمة للتحقق من صحة الإدخال. ستتم مطابقة كل عنصر من عناصر النموذج بواسطة سمة "الاسم" مع القاعدة المقابلة، إن وجدت. إذا لم تكن هناك قاعدة، فلن يتم التحقق من الصحة.
لا يتم تعريف القواعد بشكل افتراضي، ولكن يمكن تعيينها عبر السمات، أو الفئات في HTML، أو في خيارات init.
- مطلوب : منطقية
- التعبير العادي : RegExp
- البريد الإلكتروني : منطقية
- الهاتف: منطقي
- عنوان URL: منطقي
- حجم الملف: رقم
- التمديد: سلسلة
يمكن استخدام هذه الصفات
- النوع - البريد الإلكتروني أو الهاتف أو عنوان url (سيتم استخدام regexp لكل نوع)
- النمط - التعبير العادي مع قيمة السمة
- مطلوب - تحقق من الإدخال بحثًا عن قيمة فارغة
مثال:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > يمكنك تعيين القواعد الخاصة بك باستخدام وظيفة addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;أضف القواعد كجزء من كائن الخيارات الخاص بك عند التهيئة:
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;يمكنك جمع البيانات من النموذج بأكمله أو فقط عن طريق اسم الإدخال. تقوم الطريقة بإرجاع بيانات جديدة.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field يمكنك تحديد رسائل الخطأ الخاصة بك في حالة فشل التحقق من الصحة. في حالة فشل عنصر النموذج في التحقق من الصحة، سيتم تطبيق الرسالة المقابلة لسمة "اسم" العنصر.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
