ورقة غش التحقق من النماذج Parsley.js

توفر Parsley.js تجربة مستخدم فائقة للتحقق من النماذج في جانب العميل دون الحاجة لكتابة كود جافا سكريبت متكرر.

التهيئة والبدء

// التهيئة الموصى بها عبر JavaScript
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

---

قيود التحقق القياسية في HTML

<!-- حقل إجباري مطلوب -->
<input required />

<!-- أنواع البريد الإلكتروني والرابط -->
<input type="email" />
<input type="url" />

<!-- حدود الطول -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- الأنماط العددية والتعبيرات النمطية -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- نطاق الأرقام -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- حدود اختيار مربعات الاختيار -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- مطابقة تأكيد كلمة المرور -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

واجهة برمجة التطبيقات JavaScript للنموذج والحقول

دوال كائن النموذج (Form Methods)

const form = $('#myForm').parsley();

form.isValid();   // يرجع true إذا كان صالحاً و false إذا كان غير صالح
form.validate();  // يشغل التحقق ويعرض رسائل الخطأ
form.reset();     // يعيد ضبط حالة التحقق ويمسح الأخطاء
form.destroy();   // يفك ربط معالجات Parsley من النموذج

دوال كائن الحقل (Field Methods)

const field = $('#username').parsley();

field.isValid();
field.validate(); // يرجع مصفوفة من كائنات القيود التي فشلت

---

متحققات مخصصة (Custom Validators)

تسجيل متحققات نطاق مخصصة بشكل عام:

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    ar: 'يجب أن تكون هذه القيمة مضاعفاً للعدد %s.',
    en: 'This value must be a multiple of %s.'
  }
});

طريقة الاستخدام في كود HTML:

<input type="number" data-parsley-multiple-of="5" />

---

مراجع مفيدة

• التوثيق الرسمي لمكتبة Parsley.js