تصف هذه المقالة طريقة JS للتحقق من النموذج. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
1. رمز التحقق التقليدي
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> التحقق من النموذج </title>
<script type = "text/javaScript">
وظيفة $ (id) {
return document.getElementById (id) ؛
}
وظيفة check () {
var email = $ ("البريد الإلكتروني"). القيمة ؛
var password = $ ("كلمة المرور"). القيمة ؛
var repassword = $ ("repassword"). value ؛
var name = $ ("name"). value ؛
إذا (البريد الإلكتروني == "") {
تنبيه ("لا يمكن أن تكون قيمة البريد الإلكتروني فارغة") ؛
$ ("البريد الإلكتروني"). Focus () ؛
العودة كاذبة
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
التنبيه ("تنسيق صندوق البريد غير صحيح ، يجب أن يتضمن @ و.") ؛
$ ("البريد الإلكتروني"). Focus () ؛
العودة كاذبة
}
إذا (كلمة المرور == "") {
تنبيه ("لا يمكن أن تكون كلمة المرور فارغة") ؛
$ ("كلمة المرور"). Focus () ؛
العودة كاذبة
}
if (password.length <6) {
التنبيه ("يجب أن يكون طول كلمة المرور أكبر من أو يساوي 6") ؛
$ ("كلمة المرور"). Focus () ؛
العودة كاذبة
}
if (repassword! = كلمة المرور) {
تنبيه ("كلمة المرور التي تم إدخالها مرتين غير متسقة") ؛
$ ("repassword"). Focus () ؛
العودة كاذبة
}
if (name == "") {
تنبيه ("لا يمكن أن يكون الاسم فارغًا") ؛
$ ("الاسم"). Focus () ؛
العودة كاذبة
}
لـ (var i = 0 ؛ i <name.length ؛ i ++) {
var j = name.substring (i ، i+1) ؛
if (isnan (j) == false) {
التنبيه ("لا يمكن أن يحتوي الاسم على أرقام") ؛
$ ("الاسم"). Focus () ؛
العودة كاذبة
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<viv>
البريد الإلكتروني: <إدخال type = "text" name = "email" id = "email"/>
</div>
<viv>
كلمة المرور: <إدخال type = "password" name = "password" id = "password" />
</div>
<viv>
أعد إدخال كلمة المرور: <إدخال type = "password" name = "repassword" id = "repassword" />
</div>
<viv>
الاسم: <إدخال type = "text" name = "name" id = "name" />
</div>
<viv>
<type type = "إرسال" value = "سجل" />
</div>
</form>
</body>
</html>
2. التحقق من النموذج مع معلومات سريعة وراء مربع الإدخال
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> التحقق من النموذج </title>
<script type = "text/javaScript">
وظيفة $ (id) {
return document.getElementById (id) ؛
}
وظيفة check () {
var email = $ ("البريد الإلكتروني"). القيمة ؛
var password = $ ("كلمة المرور"). القيمة ؛
var repassword = $ ("repassword"). value ؛
var name = $ ("name"). value ؛
$ ("emailInfo"). innerhtml = "" ؛
$ ("passwordinfo"). innerhtml = "" ؛
$ ("repasswordinfo"). innerhtml = "" ؛
$ ("nameInfo"). innerhtml = "" ؛
إذا (البريد الإلكتروني == "") {
$ ("emailInfo"). innerhtml = "لا يمكن أن تكون قيمة البريد الإلكتروني فارغة" ؛
$ ("البريد الإلكتروني"). Focus () ؛
العودة كاذبة
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). innerhtml = "تنسيق صندوق البريد غير صحيح ، يجب أن يتضمن @ و." ؛
$ ("البريد الإلكتروني"). Focus () ؛
العودة كاذبة
}
إذا (كلمة المرور == "") {
$ ("passwordinfo"). innerhtml = "لا يمكن أن تكون كلمة المرور فارغة" ؛
$ ("كلمة المرور"). Focus () ؛
العودة كاذبة
}
if (password.length <6) {
$ ("passwordinfo"). innerhtml = "يجب أن يكون طول كلمة المرور أكبر من أو يساوي 6" ؛
$ ("كلمة المرور"). Focus () ؛
العودة كاذبة
}
if (repassword! = كلمة المرور) {
$ ("repasswordinfo"). innerhtml = "كلمة المرور التي تم إدخالها مرتين غير متسقة" ؛
$ ("repassword"). Focus () ؛
العودة كاذبة
}
if (name == "") {
$ ("nameInfo"). innerhtml = "لا يمكن أن يكون الاسم فارغًا" ؛
$ ("الاسم"). Focus () ؛
العودة كاذبة
}
لـ (var i = 0 ؛ i <name.length ؛ i ++) {
var j = name.substring (i ، i+1) ؛
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = "الاسم لا يمكن أن يحتوي على أرقام" ؛
$ ("الاسم"). Focus () ؛
العودة كاذبة
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<viv>
البريد الإلكتروني: <input type = "text" name = "email" id = "email"/> <span id = "emailInfo"> </span>
</div>
<viv>
كلمة المرور: <إدخال type = "password" name = "password" id = "password" /> <span id = "passwordinfo"> </span>
</div>
<viv>
أعد إدخال كلمة المرور: <type type = "password" name = "repassword" id = "repassword" /> <span id = "repasswordinfo"> </span>
</div>
<viv>
الاسم: <إدخال type = "text" name = "name" id = "name" /> <span id = "nameInfo"> </span>
</div>
<viv>
<type type = "إرسال" value = "سجل" />
</div>
</form>
</body>
</html>
العروض كما يلي:
3. تشغيل وظيفة الاختيار عندما يفقد مربع الإدخال التركيز
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> التحقق من النموذج </title>
<script type = "text/javaScript">
وظيفة $ (id) {
return document.getElementById (id) ؛
}
وظيفة check () {
var email = $ ("البريد الإلكتروني"). القيمة ؛
var password = $ ("كلمة المرور"). القيمة ؛
var repassword = $ ("repassword"). value ؛
var name = $ ("name"). value ؛
$ ("emailInfo"). innerhtml = "" ؛
$ ("passwordinfo"). innerhtml = "" ؛
$ ("repasswordinfo"). innerhtml = "" ؛
$ ("nameInfo"). innerhtml = "" ؛
إذا (البريد الإلكتروني == "") {
$ ("emailInfo"). innerhtml = "لا يمكن أن تكون قيمة البريد الإلكتروني فارغة" ؛
العودة كاذبة
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). innerhtml = "تنسيق صندوق البريد غير صحيح ، يجب أن يتضمن @ و." ؛
العودة كاذبة
}
إذا (كلمة المرور == "") {
$ ("passwordinfo"). innerhtml = "لا يمكن أن تكون كلمة المرور فارغة" ؛
العودة كاذبة
}
if (password.length <6) {
$ ("passwordinfo"). innerhtml = "يجب أن يكون طول كلمة المرور أكبر من أو يساوي 6" ؛
العودة كاذبة
}
if (repassword! = كلمة المرور) {
$ ("repasswordinfo"). innerhtml = "كلمة المرور التي تم إدخالها مرتين غير متسقة" ؛
العودة كاذبة
}
if (name == "") {
$ ("nameInfo"). innerhtml = "لا يمكن أن يكون الاسم فارغًا" ؛
العودة كاذبة
}
لـ (var i = 0 ؛ i <name.length ؛ i ++) {
var j = name.substring (i ، i+1) ؛
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = "الاسم لا يمكن أن يحتوي على أرقام" ؛
العودة كاذبة
}
}
}
وظيفة checkemail () {// تحقق من البريد الإلكتروني
$ ('emailInfo'). innerhtml = "" ؛
var email = $ ('البريد الإلكتروني'). القيمة ؛
إذا (البريد الإلكتروني == "") {
$ ('emailInfo'). innerhtml = "لا يمكن أن تكون قيمة البريد الإلكتروني فارغة" ؛
العودة كاذبة
}
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerhtml = "يجب أن يحتوي البريد الإلكتروني على @ و." ؛
العودة كاذبة
}
}
وظيفة checkpassword () {// تحقق من كلمة المرور
$ ('passwordinfo'). innerhtml = "" ؛
var password = $ ('كلمة المرور'). القيمة ؛
إذا (كلمة المرور == "") {
$ ("passwordinfo"). innerhtml = "لا يمكن أن تكون كلمة المرور فارغة" ؛
العودة كاذبة
}
if (password.length <6) {
$ ("passwordinfo"). innerhtml = "يجب أن يكون طول كلمة المرور أكبر من أو يساوي 6" ؛
العودة كاذبة
}
}
وظيفة checkRepassword () {// تحقق من كلمة المرور إعادة إدخالها
$ ('repassword'). innerhtml = "" ؛
var repassword = $ ('repassword'). value ؛
if (repassword! = كلمة المرور) {
$ ("repasswordinfo"). innerhtml = "كلمة المرور التي تم إدخالها مرتين غير متسقة" ؛
العودة كاذبة
}
}
وظيفة checkName () {// تحقق من الاسم
$ ('nameInfo'). innerhtml = "" ؛
var name = $ ('name'). value ؛
if (name == "") {
$ ("nameInfo"). innerhtml = "لا يمكن أن يكون الاسم فارغًا" ؛
العودة كاذبة
}
لـ (var i = 0 ؛ i <name.length ؛ i ++) {
var j = name.substring (i ، i+1) ؛
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = "الاسم لا يمكن أن يحتوي على أرقام" ؛
العودة كاذبة
}
}
}
</script>
</head>
<body>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<viv>
البريد الإلكتروني: <input type = "text" name = "email" id = "email" onblur = "checkeMail () ؛"/> <span id = "emailInfo"> </span>
</div>
<viv>
كلمة المرور: <إدخال type = "password" name = "password" id = "password" onblur = "checkpassword () ؛"/> <span id = "passwordinfo"> </span>
</div>
<viv>
أعد إدخال كلمة المرور: <type type = "password" name = "repassword" id = "repassword" onblur = "checkRepassword () ؛"/> <span id = "repasswordinfo"> </span>
</div>
<viv>
الاسم: <إدخال type = "text" name = "name" id = "name" onBlur = "checkName () ؛"/> <span id = "nameInfo"> </span>
</div>
<viv>
<type type = "إرسال" value = "سجل" />
</div>
</form>
</body>
</html>
العروض كما يلي:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.