انسخ رمز الكود كما يلي:
// ضعها في الوظيفة () {} الخاصة بـ onReady
Ext.QuickTips.init(); // توفير وظيفة المعلومات السريعة للمكونات. المعلومات السريعة الرئيسية للنموذج هي رسالة الخطأ الخاصة بالتحقق من العميل.
Ext.form.Field.prototype.msgTarget='side'; // طريقة المطالبة، قيمة التعداد هي:
qtip - يعرض تلميحًا عندما يتحرك الماوس فوق عنصر التحكم؛
العنوان-العنوان المعروض في المتصفح، ولكن نتيجة الاختبار هي نفس نتيجة qtip؛
يعرض رسالة خطأ ضمن عنصر التحكم؛
يعرض الجانب رمز خطأ على الجانب الأيمن من عنصر التحكم، ويعرض رسالة خطأ عندما يشير الماوس إلى القيمة الافتراضية؛
يتم عرض رسالة الخطأ id-[element id] في عنصر HTML الخاص بالمعرف المحدد
1. أبسط مثال: التحقق من القيمة الفارغة
انسخ رمز الكود كما يلي:
// معلمتان للتحقق من القيمة الفارغة
allowBlank:false//false لا يمكن أن يكون فارغًا، فالقيمة الافتراضية هي true
BlankText:string// رسالة خطأ عندما تكون فارغة
رمز js هو:
انسخ رمز الكود كما يلي:
فار form1 = جديد Ext.form.FormPanel({
العرض: 350،
تقديم إلى:"form1"،
العنوان:"FormPanel"،
الإعدادات الافتراضية:{xtype:"textfield"،inputType:"password"}،
أغراض:[
{fieldLabel:"لا يمكن أن يكون فارغًا"،
allowBlank:خطأ، // غير مسموح بالفارغ
نص فارغ: "لا يمكن أن يكون فارغًا"، // رسالة خطأ، الافتراضي هو هذا الحقل مطلوب!
المعرف: "فارغة"،
}
]
});
2. استخدم تنسيق vtype للتحقق البسيط.
في هذا المثال للتحقق من البريد الإلكتروني، أعد كتابة تكوين العناصر للكود أعلاه:
انسخ رمز الكود كما يلي:
أغراض:[
{fieldLabel:"لا يمكن أن يكون فارغًا"،
vtype:"email"،//التحقق من تنسيق البريد الإلكتروني
vtypeText: "عنوان البريد الإلكتروني ليس صالحًا"، // رسالة خطأ، لن أنتقل إلى القيمة الافتراضية.
المعرف: "فارغة"،
مرساة: "90%"
}
يمكنك تعديل vtype أعلاه إلى عمليات التحقق التالية التي تدعمها أنواع vtype التالية من extjs افتراضيًا:
// النوع الافتراضي المدعوم من vtype في التحقق من صحة النموذج
1.alpha // يمكن إدخال الحروف فقط، ولا يمكن إدخال الحروف الأخرى (مثل الأرقام والرموز الخاصة وما إلى ذلك)
2.alphanum// يمكن إدخال الحروف والأرقام فقط، ولا يمكن إدخال أي إدخال آخر
3.email//التحقق من البريد الإلكتروني، التنسيق المطلوب هو ""
4.url//url التحقق من التنسيق، التنسيق المطلوب هو http://www.baidu.com
3. التحقق المتقدم من كلمة المرور المخصصة
يتم توفير جميع عمليات التحقق السابقة بواسطة extjs، ويمكننا أيضًا تخصيص وظيفة التحقق.
انسخ رمز الكود كما يلي:
// استخدم أولاً طريقة Ext.apply لإضافة وظيفة مخصصة للتحقق من كلمة المرور (يمكنك أيضًا إعطائها اسمًا آخر)
Ext.apply(Ext.form.VTypes,{
كلمة المرور: الوظيفة (val، field) {// يشير val إلى قيمة مربع النص هنا، ويشير الحقل إلى مكون مربع النص هذا، ويجب على الجميع فهم هذا المعنى
if(field.confirmTo){//confirmTo هي معلمة التكوين المخصصة لدينا، والتي تُستخدم بشكل عام لحفظ قيمة المعرف لمكون آخر
var pwd=Ext.get(field.confirmTo);// احصل على قيمة معرف تأكيد To
return (val==pwd.getValue());
}
عودة صحيحة؛
}
});
// تكوين معلمات العناصر
العناصر:[{fieldLabel:"كلمة المرور"،
المعرف: "pass1"،
},{
fieldLabel:"تأكيد كلمة المرور"،
المعرف: "pass2"،
vtype:"password"،//نوع التحقق المخصص
vtypeText: "كلمتا المرور غير متناسقتين!",
ConfirmTo:"pass1"،//معرف المكون الآخر المراد مقارنته
}
4. استخدم التحقق من التعبير العادي
انسخ رمز الكود كما يلي:
Ext.form.TextField جديد ({
تسمية الحقل: "الاسم"،
الاسم: "author_nam"،
regex: /[/u4e00-/u9fa5]/، // التعبير العادي بين /...../ [/u4e00-/u9fa5]: يمكن إدخال اللغة الصينية فقط.
regexText: "يمكن إدخال اللغة الصينية فقط!"، // رسالة خطأ في التعبير العادي
allowBlank: false // لا يزال هذا التحقق صالحًا، ولا يمكن أن يكون فارغًا.