تطوير صفحة HTML مسجلة لجمع معلومات تسجيل المستخدم. بما في ذلك: الاسم (لا يمكن أن يكون فارغًا) ، العمر (يجب أن يكون عمره أكثر من 17 عامًا) ، والوزن (30-150 كجم) ، والفئة (القائمة المنسدلة) ، وكلمة مرور تسجيل الدخول (طولها 8 أرقام على الأقل) ، كلمة مرور التأكيد (مثل كلمة مرور تسجيل الدخول) ، والبريد الإلكتروني (لا يمكن أن يكون فارغًا) ، ورقم الهاتف ، و QQ ، والاستئناف وغيرها من المعلومات. وإنشاء التحقق المقابل لعناصر هذه الجداول. إذا تم اكتشاف خطأ ، فسيتم عرض خطأ بالكلمات الحمراء بعد مربع الإدخال. يجب عليك استخدام نص مربع إدخال النص الفردي ، مربع القائمة المنسدلة ، حدد كلمة مربع إدخال كلمة المرور ، ومربع إدخال نص متعدد الخطوط في الأقسام السابقة. هذا نموذج أكثر عملية تسجيل المستخدم.
register.html:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> التجربة 2 </title>
<link href = "check.css" rel = "STYLESHEET" type = "text/css">
<script type = "text/javaScript" src = "load.js">
</script>
</head>
<!-إرجاع التحقق من صحة () والتحقق () حول ما إذا كان النموذج قد تم مسحه->
<body onload = "load_greeting ()">
<form id = "test" align = "left" onsubmit = "return validate ()">
<griding>
<tr>
<td> الاسم*: </td>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*لا يمكن أن يكون الاسم فارغًا </td>
</r>
<tr>
<td> العمر: </td>
<td> <input type = "text" name = "Age" id = "Age" size = "20" onChange = 'Check ("Age")'> </td>
<td id = "AgeCheck" Hidden = "True">*العمر لا يمكن أن يكون عمره أقل من 17 عامًا </td>
</r>
<tr>
<td> الوزن: </td>
<td> <input type = "text" name = "weight" id = "weight" size = "20" onChange = '
<td id = "wintercheck" hidden = "true">*نطاق الوزن هو 30 ~ 150kg </td>
</r>
<tr>
<td> الفصل: </td>
<td> <select id = "class" name = "class">
<Poort> Class0 </Option>
<Poort> class1 </soph>
<Poort> class2 </soph>
<Poort> class3 </soph>
</select>
</td>
</r>
<tr>
<td> كلمة المرور*: </td>
<td> <input type = "password" name = "password" id = "password" size = "20" onChange = '
<td id = "passwordcheck" hidden = "true">*طول كلمة المرور أقل من 8 </td>
</r>
<tr>
<td> تأكيد كلمة المرور*: </td>
<td> <input type = "password" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*اثنين من passwd ليسا نفس </td>
</r>
<tr>
<td> البريد الإلكتروني*: </td>
<td> <input type = "email" name = "email" id = "email" size = "20" onchange = 'check (this.id)'> </td>
<td id = "emailCheck" hidden = "true">*اسم البريد الإلكتروني غير قانوني! </td>
</r>
<tr>
<td> tel: </td>
<td> <input type = "text" name = "tel" id = "tel" size = "20"> </td>
</r>
<tr>
<td> qq: </td>
<td> <input type = "text" name = "qq" id = "qq" size = "20"> </td>
</r>
<tr>
<td> المعلومات الشخصية: </td>
<td> <textarea rows = "10" cols = "19"> </textarea> </td>
</r>
<tr>
<td colspan = "3">
<type type = "إرسال" name = "إرسال">
<type type = "reset" name = "reset">
</td>
</r>
</table>
</form>
</body>
</html>
check.css:
نسخة الكود كما يلي:
td.check {
اللون:#C00 ؛
خط الرصيف: جريئة ؛
}
load.js:
نسخة الكود كما يلي:
فحص الوظيفة (STR)
{
var x = document.getElementById (str) ؛
var y = document.getElementById (str+"check") ؛
// تنبيه ("تحقق!") ؛
إذا (str == "الاسم")
{
إذا (x.value == "")
y.hidden = false ؛
آخر
y.hidden = صحيح ؛
}
آخر إذا (str == "العمر")
{
if (isnan (x.value) || x.value <17)
y.hidden = false ؛
آخر
y.hidden = صحيح ؛
}
آخر إذا (str == "الوزن")
{
x = x.value ؛
if (isnan (x) || x <30 || x> 150)
y.hidden = false ؛
آخر
y.hidden = صحيح ؛
}
آخر إذا (str == "كلمة المرور")
{
x = x.value.length ؛
إذا (x <8)
{
y.hidden = false ؛
// تنبيه ("تحقق!") ؛
}
آخر
y.hidden = صحيح ؛
}
آخر إذا (str == "cpassword")
{
var z = document.getElementById ("كلمة المرور"). القيمة ؛
x = x.value ؛
إذا (x! = z)
y.hidden = false ؛
آخر
y.hidden = صحيح ؛
}
آخر إذا (str == "البريد الإلكتروني")
{
x = x.value.indexof ("@")
إذا (x == -1)
y.hidden = false ؛
آخر
y.hidden = صحيح ؛
}
العودة y.hidden ؛
}
وظيفة التحقق ()
{
var arr = ["name" ، "Age" ، "Weight" ، "Password" ، "CPAPSWORD" ، "Email"] ؛
var i = 0 ؛
إرسال = صواب ؛
بينما (أنا <= 5)
{
إذا (! تحقق (arr [i]))
{
تنبيه (arr [i]+"خطأ!") ؛
إرسال = false ؛
استراحة؛
}
i ++ ؛
}
إذا (submitok)
{
تنبيه ("إرسال ناجح!") ؛
العودة صحيح.
}
آخر
{
تنبيه ("فشل التقديم") ؛
العودة كاذبة
}
}
وظيفة load_greeting ()
{
// ALERT ("Visit /N") ؛
}