التحقق من الإدخال

جزء من قسم JavaScript قيد التطبيق في رحلة HTML على Coddy. الدرس 5 من 27.

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

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

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

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

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 أحرف، وإلى الأخضر إذا كان صالحًا.

التحدي

سهل

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

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

عندما يحتوي البريد الإلكتروني على "@"،
يصبح حدّ الحقل "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>