تشارك هذه المقالة الطرق المشتركة لـ JavaScript لمعالجة أحداث النماذج للرجوع إليها. المحتوى المحدد كما يلي
1. الطرق الشائعة للوصول إلى كائنات النماذج:
①: وفقًا لسمة ID لعنصر <Porm> ؛
var myform = document.getElementById ("myformid") ؛ // myformid هو معرف العنصر <Porm> ؛
②: وفقًا لسمة الاسم لعنصر <Porm> ؛
var myform = document.forms ["myFormName"] ؛ // myFormName هو اسم العنصر <Porm> ؛
③: استخدم اسم النموذج مباشرة للوصول إلى النموذج:
var myform = document.myformName ؛ // myFormName هو اسم العنصر <Porm> ؛
2. الأحداث الشائعة للنماذج:
① حدث OnSubmit: سيتم تشغيل هذا الحدث عند النقر فوق الزر "إرسال" وقد يمنع تقديم النموذج. مثال: التحقق من النماذج ؛
② ② ongricnange حدث: يتم تشغيل هذا الحدث عندما يغير المستخدم المحتوى ويفقد مربع النص محور التركيز ؛
مثال: نموذج التقديم
واجهة مكتب الاستقبال:
رمز الواجهة المقدمة:
<form name = "myform" Action = "JavaScript: Alert ('مسجل بنجاح!') ؛" method = "post" onsubmit = "return yanzheng () ؛"> <table> <tbody> <tbor> <td> اسم المستخدم: </td> <td> <td name = "username" id = "username" type = "text"/> </td> <td align = "left"> </td> </tr> <tr> <td> كلمة المرور: </td> <td> <td> <inpute id = "password" onChange = "passwordleave ()" type = "password"/> </td> <td align = "left"> <p style = "color: #ff0000 id = "button2" type = "button" value = "medium" style = "background-color: #ff0000"/> <input id = "button3" type = "button" value = "strong" type = "text"/> </td> <td> <input id = "age" type = "text"/> </td> <td> <p style = "color: #ff0000">*</p> </p> </td> </tr> <tr> <td> الجنس: </td> <td> <simpe = " name = "sex" type = "radio" value = "female"/> female </td> <td> align = "left"> <p style = "color: #ff0000">*</p> </td> </td> value = "Entertainment"/> Entertainment <type type = "checkbox" name = "content" value = "upplication"/> Entertainment </td> <td align = "left"> <p style = "color: #ff0000">*</p> </p> </td> المدرسة </orpue> <option value = "2"> مدرسة سنيعة </option> <خيار value = "3"> الجامعة </option> <option value = "4"> الجامعة </oper name = "like" size = "6" multives = "multives"> <option value = "1"> كرة السلة </option> <Opture value = "2"> كرة القدم </option> <Option Value = "3" <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> <input id = "button4" type = "button" onClick = "checkInfo () name = "tijiao" value = "register"/> </td> <td> <type type = "reset" name = "reset" value = "reset"/> </td> </tbor> </tbody> </table> </form>نص JS:
<script type = "text/javaScript"> function yanzheng () {var b ؛ var a = document.getElementById ("اسم المستخدم") ؛ // احصل على قيمة اسم المستخدم var p = document.getElementById ("كلمة المرور") ؛ // الحصول على قيمة كلمة المرور var age = myform.age.value ؛ // احصل على قيمة العمر if (A.Value.length <5 || A.Value.Length> 10) {Alert ("اسم المستخدم الذي أدخلته هو تنسيق غير صحيح!") ؛ العودة كاذبة } آخر إذا (p.value.length <5) {Alert ("طول كلمة المرور أقل من 5!") ؛ العودة كاذبة } آخر إذا (! checkage (العمر)) {return false ؛ } آخر {return true ؛ }} checkage (a) {// تحقق من العمر var ch ، العمر ؛ لـ (var i = 0 ؛ i <a.length ؛ i ++) {ch = a.charat (i) ؛ if (ch <"0" || ch> "9") {Alert ("الرجاء إدخال الرقم في خيار العمر!") ؛ العودة كاذبة }} العمر = parseint (a) ؛ if (العمر <10 || العمر> 100) {Alert ("العمر غير صحيح!") ؛ العودة كاذبة } إعادة صواب ؛ } وظيفة checkInfo () {// إظهار جميع المعلومات var username = myform.username.value ؛ // الحصول على اسم المستخدم var password = myform.password.value ؛ // الحصول على كلمة المرور var age = myform.age.value ؛ // الحصول على العمر var sex = myform.sex ؛ // الحصول على الجنس var osex = "" ؛ // قم بتعيين خيار للحصول على محتوى var بين الجنسين = myform.content ؛ // الحصول على المحتوى var ocontent = "" ؛ // قم بتعيين خيار للحصول على المحتوى var eduleave = myForm.edu_level ؛ // الحصول على التعليم var oedu = "" ؛ // تعيين خيار للحصول على التعليم var intersent = myForm.like ؛ // الحصول على نموذج هواية var like = "" ؛ // قم بتعيين متغير للحصول على خيار هواية (var i = 0 ؛ i <sex.length ؛ i ++) {// الجنس إذا (الجنس [i] }} لـ (var i = 0 ؛ i <content.length ؛ i ++) {// content if (content [i] .checked) {ocontent += content [i] .value +"" ؛ }} لـ (var i = 0 ؛ i <eduleave.length ؛ i ++) {// exational if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .text ؛ }} لـ (var i = 0 ؛ i <intersent.length ؛ i ++) {// الهوايات if (intersent.options [i] .selected) {olike += intersent.options [i] .text +"" ؛ }} ALERT ("اسم المستخدم الخاص بك هو:" + اسم المستخدم + "/n كلمة المرور هو:" + كلمة المرور + "/n العمر هو:" + age + "/n الجنس هو:" + ocontent + "/n التعليم هو:" + oedu + "/n هوايات: } وظيفة passwordleave () {var passwordleavel = myform.password.value ؛ if (passwordleavel.length == "") {document.getElementById ("button1"). style.display = "none" ؛ document.getElementById ("button2"). style.display = "none" ؛ document.getElementById ("button3"). style.display = "none" ؛ } آخر {if (passwordleavel.length <= "5") {document.getElementById ("button1"). style.display = "" ؛ document.getElementById ("button2"). style.display = "none" ؛ document.getElementById ("button3"). style.display = "none" ؛ } آخر إذا (passwordleavel.length <= "10") {document.getElementById ("button1"). style.display = "" ؛ document.getElementById ("button2"). style.display = "" ؛ document.getElementById ("button3"). style.display = "none" ؛ } آخر {document.getElementById ("button1"). style.display = "" ؛ document.getElementById ("button2"). style.display = "" ؛ document.getElementById ("button3"). style.display = "" ؛ }}} function startbody () {document.getElementById ("button1"). style.display = "none" ؛ document.getElementById ("button2"). style.display = "none" ؛ document.getElementById ("button3"). style.display = "none" ؛ } </script>هذه الحالة هي مجرد بعض الممارسات الشائعة ولا تتضمن أي تقنية ، ولكنها فقط لراحة استخدام المرة القادمة.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.