5. إنشاء صفحة رسالة ---- التحكم في التحقق من صحة البيانات وإضافة البيانات
مقدمة ذات صلة:
يشترط صحة البيانات للموقع. من أجل التحقق بسهولة أكبر مما إذا كانت البيانات التي أدخلها المستخدمون صحيحة، يوفر ASP.NET للمبرمجين عناصر تحكم للتحقق من صحة البيانات. تتضمن عناصر التحكم في التحقق من صحة البيانات التي يوفرها ASP.NET. (ملاحظة: لعرض الرمز، تحتوي جميع الرموز التالية على مسافات بعد "<" وقبل ">". نعتذر عن الإزعاج!):
تقوم وظيفة | التحكم |
RequiredFieldValidator |
بالتحقق | مما إذا كان هناك إدخال بيانات في حقل الإدخال |
يتحقق RangeValidator | مما إذا كانت البيانات المدخلة في حقل الإدخال ضمن نطاق معين |
اختبار ما إذا كان حقل الإدخال يساوي أو لا يساوي أو أكبر من أو لا يقل عن أو أقل من |
ValidationSummary | يسرد كافة عناصر التحكم التي فشلت في الاختبار |
RegularExpressionValidator | تحقق مما إذا كان العمود يتوافق مع قواعد التعبير العادي |
وقواعد التحقق المخصصة | CustomValidator |
الخطوة 1 صفحة التصميم <BR>نستخدم أولاً جدولًا لتصميم إطار عمل تقريبي. نظرًا لأن جدول التعليقات في قاعدة البيانات يحتوي على
[الشكل 5-1 إطار قاعدة البيانات]
COMMENT_ID (رقم تلقائي)، FIRST_NAME (نص)، LAST_NAME (نص)، TELEPHONE (نص)، EMAIL (نص)، SUBMIT_DATE (تاريخ/وقت)، COMMENTS (ملاحظات)، ANSWERED (قيمة منطقية) وحقول أخرى. وحسب الاحتياجات قمنا بتصميم الصفحة كما هو موضح أدناه في الموقع باسم reg.aspx.
[الشكل 5-2 الصفحة الأولية]
من بينها، يمكن إضافة COMMENT_ID تلقائيًا عن طريق ACCESS، ولا يحتاج المستخدم إلى إضافة ANSWERED. يتم تعيين القيمة الافتراضية SUBMIT_DATE على Now()، وسيقوم ACCESS تلقائيًا بكتابة تاريخ السجل المضاف.
في صفحة ASP السابقة، يمكننا المرور
لإعداد صناديق الإدخال لإدخال البيانات. يحتوي ASP.NET على عنصر تحكم في مربع النص لقبول البيانات، ويكون بناء الجملة كما يلي:
< asp:textbox id=”…” runat=”server” سمات أخرى/ >
في DreamweaverMX، يمكنك النقر فوق زر الاختصار لإضافة التحكم في مربع النص. في مربع الحوار المنبثق، قم بتعيين المعرف ووضع النص (نوع مربع الحوار) وتلميح الأداة (المطالبة عند تحريك الماوس فوق عنصر التحكم) والتخطيط (تصميم النمط) ومعلومات النمط (المستخدمة لتعيين الإدخال تنسيق النص وتنسيق حدود مربع النص) لتعيين عنصر التحكم. الصورة أدناه هي مربع حوار الإعدادات في مربع النص.
[الشكل 5-3 مربع حوار إعدادات مربع النص 1]
[الشكل 5-4 مربع حوار إعدادات مربع النص 2]
[الشكل 5-5 مربع حوار إعدادات مربع النص 3]
نظرًا لأن عنصر البيانات COMMENT يتطلب إدخال كمية كبيرة من النص، فيجب استخدام مربع نص يحتوي على أسطر إدخال متعددة. ما عليك سوى ضبط وضع النص على MultiLine وإدخال العدد المطلوب من الصفوف (الصفوف).
من أجل إنشاء الحدث المضاف، هناك حاجة أيضًا إلى زر. انقر فوق علامة التبويب "نماذج" وانقر فوق الزر "زر" للإضافة.
استخدام التحقق من صحة البيانات STEP2
نظرًا لأنه يجب إدخال الاسم الأول واسم العائلة والهاتف والبريد الإلكتروني، لمنع المستخدم من نسيان الإدخال، يمكنك إضافة عنصر التحكم RequiredFieldValidator للتحقق من عنصر التحكم. نظرًا لأن عنصر التحكم سيعرض المحتوى الذي يفشل في التحقق في موقعه في حالة حدوث أخطاء في التحقق من الصحة، فيجب وضع عنصر تحكم التحقق من صحة البيانات في الموقع المناسب.
بناء جملة التحكم للتحقق من صحة بيانات RequiredFieldValidator كما يلي:
< asp:RequiredFieldValidato سمات أخرى runat="server" >رسالة خطأ</ asp:RequiredFieldValidator >
أو
< asp:RequiredFieldValidator ErrorMessage = "رسالة خطأ" سمات أخرى runat = "الخادم"/ >
بعد النقر فوق المزيد من العلامات، حدد خادم التحقق من علامات ASP.NET ويمكنك أن ترى أن هناك أنواعًا مختلفة من عناصر التحكم في التحقق من صحة البيانات للاختيار من بينها. نحتاج إلى إضافة عنصر التحكم في التحقق من الصحة asp:RequiredFieldValidator خلف مربع إدخال الاسم الأول.
في نافذة إعدادات التحكم RequiredfieldValidator، يعد Control to Validate هو معرف عنصر التحكم في الإدخال المرتبط بعنصر التحكم في التحقق من صحة البيانات، ورسالة الخطأ هي الرسالة التي يتم عرضها عند فشل التحقق من صحة البيانات. وفي الوقت نفسه، يمكننا تحديد النمط المطلوب عن طريق تحديد معلومات التخطيط والنمط.
[الشكل 5-6 اختيار التحكم في التحقق من الصحة]
[الشكل 5-7 مربع حوار إعدادات التحكم RequiredfieldValidator]
وفي الوقت نفسه، قم بإضافة عنصر تحكم آخر للتحقق من صحة البيانات RequiredFieldValidato باستخدام نفس الأسلوب خلف مربع إدخال Last_Name. الآن يمكننا حفظ الصفحة ومعاينتها. عندما لا يتم إدخال أي بيانات في مربعي الإدخال First_name وLast_name ويتم النقر فوق الزر إرسال، ستظهر رسالة فشل التحقق. كما هو مبين في الشكل 5-8.
ولكن في كثير من الأحيان نحتاج إلى التحقق من البيانات الصحيحة، على سبيل المثال، يجب أن يتكون الرمز البريدي من 6 أرقام، ويجب أن يكون عنوان البريد الإلكتروني الذي تم إدخاله في شكل محدد. هنا تحتاج إلى استخدام RegularExpressionValidator للتحقق من صحة البيانات. في صفحة التسجيل هذه، يمكن لكل من الهاتف والبريد الإلكتروني استخدام عنصر التحكم هذا للتحقق.
[الشكل 5-8 مربع الحوار RequiredfieldValidator]
[الشكل 5-9 خصائص إعداد البريد الإلكتروني]
على غرار طريقة إضافة عنصر تحكم التحقق من صحة RequiredfieldValidator، انقر فوق "مزيد من العلامات.." لاختيار إضافة عنصر تحكم التحقق من صحة البيانات. الفرق هو تعيين تعبير التحقق من الصحة. بما أن الهاتف يحتاج إلى إدخال 7-10 أرقام، فيجب ضبطه على النحو التالي:
[0-9]{7,10}
بناء الجملة الخاص به هو كما يلي:
[]: يستخدم لتحديد الأحرف المقبولة، على سبيل المثال، az يعني أن الأحرف الصغيرة 'a'-'z' هي أحرف مقبولة، ويعني a-zA-Z أن جميع الأحرف مقبولة، ويعني 0-9 أن جميع الأحرف مقبولة. رقم.
{}: يستخدم لتحديد عدد الأحرف التي يجب إدخالها، {7,10} يعني أنه يمكن إدخال 7-10 أحرف، {0,} يعني أنه يمكن قبول 0 أحرف غير محدودة.
'.': يشير إلى إدخال أي حرف. .{0,} يعني أن 0-أي عدد لا نهائي من الأحرف مقبول.
|: يشير إلى OR (أو)، على سبيل المثال، [A-Za-z]{3}|[0-9]{3} يعني أنه يمكن قبول 3 أحرف إنجليزية أو 3 أرقام
(): لتسهيل القراءة، عادة ما تكون السلاسل التي تحتوي على الرمز | محاطة بـ (). على سبيل المثال ([A-Za-z]{3}|[0-9]{3}).
: إذا كانت تحتوي على رموز خاصة مثل []، {}، ()، |، وما إلى ذلك، فيجب إضافتها قبل هذه السلاسل.
فيما يلي بعض الأمثلة الأكثر استخدامًا:
البريد الإلكتروني: .{1,}@.{1,}/..{1}
الهاتف (بما في ذلك رمز المنطقة): ([0-9]{3,4}))[0-9]{7,8}
على الرغم من عدم وجود ضمان بأن إدخال المستخدم هو البيانات الفعلية، إلا أن التحكم في التحقق من الصحة يمكن أن يضمن صحة التنسيق.
[الشكل 5-10 صفحة المعاينة]
أما بالنسبة لعنصر التحكم CompareValidator، فتحدد خصائصه على النحو التالي:
يقوم التحكم للمقارنة | بتعيين عنصر التحكم الذي تتم مقارنته |
بالتحكم للتحقق من الصحة، | وهو ما يعين عنصر التحكم المرتبط به |
القيمة المراد مقارنتها | تضبط القيمة المقارنة |
يقوم عامل التشغيل | بتعيين علاقة المقارنة ( يساوي أو لا يساوي أو أكبر من أو يساوي أو أقل من أو أقل من أو يساوي ) |
النوع | نوع بيانات المقارنة |
تعرض رسالة الخطأ | المعلومات |
[الشكل 5-11 مربع حوار إعدادات CompareValidator]
تشبه طريقة إعداد CustomValitor عناصر التحكم الأخرى، ولكن الوظيفة المكتوبة بخط اليد OnServerValidate (في الأحداث) مطلوبة للتحقق من البيانات.
[الشكل 5-12 مربع حوار إعدادات CustomValitor]
على سبيل المثال
< asp:CustomValidator id="CusValid" runat="server" ControlToValidate=اسم التحكم OnServerValidate="TheFunction" >رسالة خطأ</ asp:CustomValidator >
<لغة البرنامج النصي=”vb” runat=”الخادم” >
الدالة TheFunction (المرسل ككائن،، القيمة كسلسلة) كقيمة منطقية
……..
يعود…
وظيفة النهاية
<// البرنامج النصي >
سيقوم عنصر التحكم هذا باستدعاء الدالة TheFuncion. إذا تم إرجاع خطأ، سيتم الإبلاغ عن رسالة خطأ.
التحكم في RangeValidator
[الشكل 5-12 مربع حوار إعداد RangeValidatorr]
يمكنك ضبط نطاق القيمة من خلال قيمة الحد الأدنى وقيمة الحد الأقصى. في الوقت نفسه، يمكنك ضبط نوع المقارنة من خلال النوع، مثل "سلسلة"، و"عدد صحيح"، وما إلى ذلك. الإعدادات الأخرى مشابهة لتلك الخاصة بالمكونات الأخرى.
يوجد أيضًا مكون: ValidationSummary. من بينها، يقوم HeaderText بتعيين نص الرأس، ويقوم DisplayMode بتعيين وضع العرض الخاص به كما يلي:
قيمة السمة | تعني |
يتم عرض ErrorMessage List BulletList | في أسطر منفصلة. يتم عرض ErrorMessage في نفس السطر. |
[الشكل 5-13 مربع حوار إعداد خاصية ValidationSummary]
مرفق الكود المصدري لأجزاء البرنامج الرئيسية:
< عرض الجدول = "75%" الارتفاع = "594" الحدود = "1" خلية الحشو = "1" تباعد الخلايا = "0" حدود اللون = "#999999" >
<تر>
< td width="22%" height="22" >الاسم الأول< /td >
< td width = "38%" >< asp:textbox BackColor = "#CCCCCC" ForeColor = "#0033FF" ID = "first" runat = "server" TextMode = "SingleLine" ToolTip = "الرجاء إدخال الاسم الأول" MaxLength ="40" BorderWidth="1" width="200"/ >< /td >
< td width="40%" >< asp:requiredfieldvalidator BackColor = "#CCCCCC" ControlToValidate = "الأول" ErrorMessage = "RequiredField" ForeColor = "#FF0000" ID = "validname" runat = "server" / > < /td >
< /تر>
<تر>
< td height="22" >الاسم الأخير< /td >
< td >< asp:textbox BackColor = "#CCCCCC" ForeColor = "#0033FF" ID = "Lastname" runat = "server" TextMode = "SingleLine" Width = "200" ToolTip = "الرجاء إدخال الاسم الأخير" BorderWidth = "1"/ >< /td >
< td >< asp:requiredfieldvalidator BackColor = "#CCCCCC" ControlToValidate = "اسم العائلة" ErrorMessage = "RequiredField" ForeColor = "#FF0000" ID = "vailLast" runat = "server" / > </ /td >
< /تر>
<تر>
< td height="22" >الهاتف< /td >
< td >< asp:textbox BackColor = "#CCCCCC" BorderWidth = "1" ForeColor = "#0066FF" ID = "telephone" runat = "server" TextMode = "SingleLine" ToolTip = "يرجى إدخال هاتفك" Width = " 200" /></TD>
< td > < asp:regularexpressionvalidator BackColor = "#CCCCCC" ControlToValidate = "الهاتف" ErrorMessage = "يتطلب 7-10 أرقام" ForeColor = "#FF0000" ID = "vailtel" runat = "الخادم" ValidationExpression = "[0-9" ]{7,10}" / > < asp:requiredfieldvalidator BackColor = "#CCCCCC" ControlToValidate = "telephone" ErrorMessage = "RequiredField" ForeColor = "#FF0000" ID = "vailtel2" runat = "server" / >< /td >
< /تر>
<تر>
< td height="22" >البريد الإلكتروني< /td >
< td >< asp:textbox BackColor = "#CCCCCC" BorderWidth = "1" ForeColor = "#0033FF" ID = "email" runat = "server" TextMode = "SingleLine" ToolTip = "الرجاء إدخال البريد الإلكتروني الخاص بك" العرض ="200"/ >< /td >
< td >< asp:regularexpressionvalidator BackColor = "#CCCCCC" ControlToValidate = "email" ErrorMessage = "إبطال عنوان البريد الإلكتروني" ForeColor = "#FF0000" ID = "valiemail" runat = "server" ValidationExpression = ".{1,}@ .{3,}" / > < asp:requiredfieldvalidator BackColor = "#CCCCCC" ControlToValidate = "email" ErrorMessage = "الحقل المطلوب" ForeColor = "#FF0000" ID = "valiemail2" runat = "server" / > < /td >
< /تر>
<تر>
< td height="22" colspan="3" >< div align="center" >التعليقات< /div >< /td >
< /تر>
<تر>
< td height="188" colspan="3" >< div align="center" >
< asp:textbox BackColor = "#CCCCCC" BorderWidth = "1" ForeColor = "#0033FF" ID = "التعليقات" الصفوف = "16" runat = "server" TextMode = "MultiLine" ToolTip = "الرجاء إدخال التعليقات" العرض ="400"/>
</ديف>
< div align = "center" > < br >
</div>< /td>
< /تر>
<تر>
< td height="71" colspan="3" >< div align="center" >
< asp:validationsummary BackColor = "#CCCCCC" DisplayMode = "BulletList" ForeColor = "#FF0000" HeaderText = "المحتوى غير الصحيح يتضمن:" ID = "valSum" runat = "server" ToolTip = "خطأ" / >
</div>< /td>
< /تر>
<تر>
< ارتفاع td = "22" colspan = "3" >< نوع الإدخال = "إرسال" اسم = "إرسال" القيمة = "إرسال" >
</ /تد>
< /تر>
</الجدول>
النمط هو كما يلي:
[معاينة الشكل 5-14]
الخطوة 3 إضافة البيانات
أما بالنسبة لوظيفة إضافة البيانات، فهي بسيطة نسبيًا، يمكننا ضبط وظيفة إضافة البيانات من خلال المعالج والسماح لبرنامج DreamweaverMX بإضافة الكود تلقائيًا. انقر فوق علامة التبويب سلوكيات الخادم في التطبيق، ثم انقر فوق الزر + لتحديد إدراج سجل (الشكل 5-15).
في مربع الحوار المنبثق، يجب عليك أولاً تحديد مصدر البيانات المتصلة. إذا لم يتم العثور عليه في القائمة، يمكنك النقر فوق الزر تعريف لتعيين مصدر البيانات (الشكل 5-16). يتم استخدام إدراج في الجدول لتعيين الجدول الذي يجب إضافة البيانات إليه. في الأعمدة، يمكن مطابقة مربع النص مع مصدر البيانات المقابل ويمكن تعيين نوع البيانات. عند النجاح، يقوم Go To بتعيين الصفحة التي سيتم الانتقال إليها إذا تمت إضافة البيانات بنجاح. عند الفشل، يمكن للانتقال إلى تعيين الصفحة للانتقال إليها في حالة فشل إضافة البيانات. وفي الوقت نفسه، يمكننا أيضًا اختيار عرض معلومات تصحيح الأخطاء عند الفشل لتعيين رسالة الخطأ التي سيتم عرضها عند فشل إضافة البيانات.
[الشكل 5-15 حدد إدراج سجل]
[الشكل 5-16 إعدادات إضافة البيانات]
دعونا نلقي نظرة على الكود المضاف:
<مم: أدخل
رونات = "الخادم"
CommandText='< %# "INSERT INTO COMMENTS (COMMENTS, EMAIL, FIRST_NAME, LAST_NAME, TELEPHONE) VALUES (?, ?, ?, ?, ?)" % >'
ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'
DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'
Expression='< %# Request.Form("MM_insert") = "form1" % >'
إنشاء مجموعة البيانات = "خطأ"
SuccessURL='< %# "index.htm" % >'
FailURL='< %# "reg.aspx" % >'
التصحيح = "صحيح"
>
<المعلمات>
< اسم المعلمة = "@COMMENTS" Value='< %# IIf((Request.Form("Comments") < > Nothing), Request.Form("Comments"), "") % >' Type="WChar" />
< اسم المعلمة = "@EMAIL" Value='< %# IIf((Request.Form("email") < > لا شيء), Request.Form("email"), "") % >' Type="WChar" />
< اسم المعلمة = "@FIRST_NAME" Value='< %# IIf((Request.Form("first") < > Nothing), Request.Form("first"), "") % >' Type="WChar" />
< اسم المعلمة = "@LAST_NAME" Value='< %# IIf((Request.Form("Lastname") < > Nothing), Request.Form("Lastname"), "") % >' Type="WChar" />
< اسم المعلمة = "@TELEPHONE" Value='< %# IIf((Request.Form("telephone") < > Nothing), Request.Form("telephone"), "") % >' Type="WChar" />
< / المعلمات >
< /مم:إدراج>
MM: Insert هي التسمية التي يستخدمها Dreamweaver لإضافة قاعدة البيانات، والمعلمة هي القيمة المستخدمة لتحديد المعلمة.
يتم استخدام الكود السابق لتحديد رابط قاعدة البيانات والصفحة التي سيتم الانتقال إليها بعد نجاح الإضافة، وفي حالة فشل الإضافة، سيتم عرض رسالة خطأ، بالإضافة إلى الجدول المرتبط.
تم تطويرها بواسطة MacroMedia نفسها وتتطلب الدعم من بعض مكونات Macromedia، وهي تختلف عن تنسيق التعليمات البرمجية القياسي للعديد من ASP.net على الإنترنت اليوم. من فضلك لا تسيء فهم تنسيق الكود القياسي لـ ASP.net بناءً على هذا الكود عند الإشارة إلى الكود. يمكنك الرجوع إلى www.gotdotnet.com للحصول على تنسيق الكود القياسي. إذا كنت تريد كتابة تعليمات برمجية قياسية، فيمكنك استخدام WebMatrix، عنوان التنزيل: http://www.asp.net/webmatrix/download.aspx?tabindex=4