التحقق من صحة المدخلات

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 5 من 27.

عند بناء النماذج، من المهم تزويد المستخدمين بـ استجابة فورية أثناء الكتابة، حتى لا يقوموا بإرسال معلومات غير صحيحة. يُسمى هذا بـ التحقق من الصحة في الوقت الفعلي.

أولاً، لنقم بإنشاء حقل إدخال نصي أساسي. نريد التحقق مما إذا كان طول اسم المستخدم لا يقل عن 5 أحرف.

<input type="text" id="username" placeholder="Enter username">

الآن، أضف مستمع أحداث (event listener) للتحقق من صحة الإدخال أثناء كتابة المستخدم:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // الحصول على القيمة الحالية
    const value = this.value;
    
    // التحقق مما إذا كانت تستوفي معاييرنا
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

يتحول لون الإطار إلى الأحمر إذا كان اسم المستخدم أقل من 5 أحرف و الأخضر إذا كان صالحاً.

التحدي

سهل

لدينا صفحة تحتوي على حقل إدخال للبريد الإلكتروني. حالياً، لا يتم التحقق من صحة تنسيق البريد الإلكتروني.

مهمتك هي إكمال السطر الموجود داخل كتلة <strong>if</strong> الحالية بحيث:

عندما يحتوي البريد الإلكتروني على "@"،
يصبح إطار (border) حقل الإدخال "2px solid rgb(0, 250, 0)".

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>