سؤال: كيفية التحقق من النموذج مباشرة بعد الإدخال ، بدلاً من التحقق منه بعد إرساله غير مريح للغاية (عمليات البحث عبر الإنترنت إما غامضة أو غير مكتملة ...)
الطريقة: في ضوء هذا ، Xiaoke ، Shuishanqi ، أكمل الكود ، وأضف الفهم الشخصي (التزميات) على Xiaoke. إنه فقط لتجنب الالتزامات. يرجى انتقاد وتصحيح جميع أنواع الأبطال ... (يرجى ملاحظة المؤلف ، Xiexie) - - إصدار نموذج الجدول ، وسيكون هناك نسخة jQuery في المستقبل ...
إذا كان يساعدك ، فيرجى تجربته (O) 〃ao ~
لقطة الشاشة:
شفرة:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <title> تسجيل المستخدم </title> <! اكتب = "Text/JavaScript"> // التحقق في الوقت المناسب من وظيفة اسم المستخدم Checkuse () {// تحديد متغير التحقق في كل وظيفة هو أن تكون قادرًا على التحقق مما إذا كانت كل وظيفة تمر واحدة تلو الأخرى بعد إرسال النموذج ، وهو أمر جيد جدًا. (نفسه كما يلي) var check ؛ var username = document.getElementById ("اسم المستخدم"). القيمة ؛ if (username.length> 18 || username.length <6) {Alert ("اسم المستخدم غير قانوني ، يرجى إعادة الدخول!") ؛ // هذا رائع جدا. منذ أن دخلت المكان الخطأ هنا ، ثم من الناحية النظرية ، بالطبع عليك الاستمرار في الدخول هنا. (استمر في الحصول على التركيز هنا!) document.getElementById ("اسم المستخدم"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("chectText1"). innerhtml = "* يتكون اسم المستخدم من أحرف 6-18 بت √" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // استخدم تعبيرات منتظمة لتحديد ما إذا كانت كلمة المرور تلبية دالة checkpwd () {var check ؛ var reg = /[^a-za-z0-9 _]+ /؛ var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /؛ var password = document.getElementById ("كلمة المرور"). القيمة ؛ if (password.length <6 || password.length> 18 || regs.test (password)) {ALERT ("إدخال كلمة المرور غير قانونية ، يرجى إعادة الدخول!") ؛ document.getElementById ("كلمة المرور"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("checktext2"). innerhtml = "* كلمة المرور تتكون من 6-18 حرفًا ويجب أن تحتوي على أحرف وأرقام وعلامات علامات الترقيم √" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // تحقق مما إذا كانت كلمة المرور غير متسقة! وظيفة checkpwdc () {var check ؛ var password = document.getElementById ("كلمة المرور"). القيمة ؛ var pwdc = document.getElementById ("pwdc"). القيمة ؛ إذا (كلمة المرور! = pwdc) {Alert ("كلمة المرور غير متسقة عند إدخال كلمة المرور ، يرجى إعادة الدخول!") ؛ document.getElementById ("PWDC"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("checktext3"). innerhtml = "* الرجاء إدخال كلمة المرور مرة أخرى √" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // تحقق من وظيفة فئة المستخدم checkut () {var check ؛ if (document.getElementById ("seluser"). selectIndex == 0) {Alert ("الرجاء تحديد نوع المستخدم!") ؛ document.getElementById ("seluser"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("checktext4"). innerhtml = "* الرجاء تحديد نوع المستخدم √" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // تحقق من دالة جنس المستخدم checkgender () {var check ؛ var gender = "" ؛ // احصل على جميع العلامات مع اسم الجنس var sex = document.getElementSbyName ("sex") ؛ // نقل هذه العلامات مع اسم الجنس (var i = 0 ؛ i <sex.length ؛ ++ i) {// إذا تم تحديد الجنس ، سجل إذا (الجنس [i]. } if (الجنس == "") {Alert ("الرجاء تحديد الجنس!") ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("chectText5"). innerhtml = "* الرجاء تحديد الجنس الخاص بك" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // تحقق في الوقت المناسب من تاريخ checkDate checkDate () {var check ؛ if (document.getElementById ("txtDate"). value == "") {Alert ("يرجى ملء تاريخ الميلاد!") ؛ document.getElementById ("txtdate"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("chectText6"). innerhtml = "* الرجاء تحديد تاريخ الميلاد الخاص بك" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // تحقق في الوقت المناسب من الوظائف والهوايات checkhobby () {var check ؛ var hobby = 0 ؛ . // نقل جميع علامات الهوايات لـ (var i = 0 ؛ i <objnum.length ؛ ++ i) {// judge ما إذا كان يتم تحديد علامة هواية إذا (objnum [i] .checked == true) hobby ++ ؛ } // إذا كان هناك علامة هواية محددة إذا (hobby> = 1) {document.getElementById ("checktext7"). innerhtml = "* الرجاء تحديد هوايتك √" ؛ تحقق = صحيح ؛ } آخر {Alert ("يرجى ملء الهواية!") ؛ تحقق = خطأ ؛ } التحقق من الإرجاع ؛ } // البريد الإلكتروني للتحقق من التعبير العادي (في الوقت المناسب) checkmail () {var check ؛ // تعبير منتظم عن البريد الإلكتروني var e1 = document.getElementById ("البريد الإلكتروني"). value.indexof ("@" ، 0) ؛ var e2 = document.getElementById ("البريد الإلكتروني"). value.indexof ("." ، 0) ؛ if (email == "" || (e1 ==-1 || e2 ==-1) || e2 <e1) {Alert ("E_Mail Inport Error!") ؛ document.getElementById ("البريد الإلكتروني"). Focus () ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("checktext8"). innerhtml = "* يرجى ملء البريد الإلكتروني الشائع ، والذي سيتم استخدامه لاسترداد كلمة المرور √" ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // التحقق في الوقت المناسب من وظيفة الإنتاج الذاتي checkintro () {var check ؛ var intro = document.getElementById ("مقدمة"). القيمة ؛ if (intro.length> 100) {Alert ("عدد الكلمات يتجاوز الحد!") ؛ تحقق = خطأ ؛ } آخر {document.getElementById ("chectText9"). innerhtml = "* يقتصر على 100 كلمة" ؛ document.getElementById ("checktext9"). Focus () ؛ تحقق = صحيح ؛ } التحقق من الإرجاع ؛ } // يتم تنفيذ جميع عمليات التحقق عند إرسال النموذج (في حالة فشل أي التحقق ، سيتم إرجاعه إلى FALSE لمنع إرسال النموذج) check () {var check = checkuse () && checkpwd () && checkpwdc () && checkgender () && checkdate () إرجاع التحقق } </script> </head> <body> <!-<form action = "jump page" method = "get" | "post" name = "form name" target = "open with" enctype = "multipart/form-data">-> <! -> <form action = "#" method = "get" onsubmit = "return check ()"> <fieldset> <legend> مثال صغير على التحقق في الوقت المناسب من النموذج </legend> <table align = "left style =" background-image: url ('img/4.jpg') ؛ " > <tr> <td> اسم المستخدم: </td> <td> <type type = "text" name = "username" id = "username" onchange = "checkuse ()"/> </td> <td id = "checktext1">* يتكون اسم المستخدم من 6-18 أحرف </td> </tr> معالج أحداث OnChange: يتم تشغيله عندما يتم التركيز على عنصر النماذج ويتغير المحتوى-> <!-ما يلي هو نفسه-> <tr> <td> كلمة المرور: </td> <td> <tde type = "password" name = "password" id = "password" onchange = "checkpwd ()"/> </td> علامات علامات الترقيم </td> </tr> <tr> <td> تأكيد كلمة المرور: </td> <td> <input type = "password" name = "pwdc" id = "pwdc" onChange = "checkpwdc ()"/> </td> <td id = "checktext3" <td> <select id = "seluser" onblur = "checkut ()"> <ebotive name = "seluser" value = "0"> الرجاء تحديد </orput </tr> <tr> <td> الجنس: </td> <td> <type type = "radio" value = "1" name = "sex" onChange = "checkgender ()"/> male <input type = "radio" value = "2" name = "sex" onChange = " <tr> <td> تاريخ الميلاد: </td> <td> <type type = "date" name = "date" id = "txtDate" onBlur = "checkDate ()"/> </td> <td id = "checktext6">* الرجاء تحديد تاريخ الميلاد </td> <td> <td> <td> name = "hobby" value = "reading" onChange = "checkhobby ()" الهوايات </td> </tr> <ttr> <td> البريد الإلكتروني: </td> <td> <type type = "text" name = "emair </td> <td> <textarea cols = "30" rows = "3" name = "introduction" id = "inchange" onChange = "checkintro ()" اكتب = "إرسال" name = "إرسال" value = "إرسال"/> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </table> </fieldset> </form> </body> </html>نمط CSS:
الإدخال: التركيز ، textarea: Focus {Border: 1px Solid #F00 ؛ الخلفية: #FCC ؛ } textarea {width: 230px ؛ الارتفاع: 50 بكسل ؛ } body {font-size: 15px ؛ /* نمط الخط*/ font-family: Microsoft Yahei ؛ } حدد الخيار {font-size: 10px ؛ Font-Family: Microsoft Yahei ؛ }ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.