تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

اعتبارسنجی فرم با جاوااسکریپت

تمرین آسان 965/ دانلود 775 بازدید

فرمی بسازید که موارد زیر را از کاربر دریافت کند و این فرم را اعتبارسنجی کند

نام و نام خانوادگی (حداکثر ۵۰ کاراکتر)
سن (بین ۱۸ تا ۷۰)
ایمیل (در فرمت ایمیل)
شماره موبایل (شروع با ۰۹ و ۱۱ رقم)
رمزعبور (حداقل ۸ کاراکتر، شامل #، عدد و حروف بزرگ و کوچک انگلیسی)
👨‍💻 1 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

2 جواب

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فرم ثبت‌نام</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>فرم ثبت‌نام</h1>
        <form id="registrationForm">
            <label for="fullName">نام و نام خانوادگی:</label>
            <input type="text" id="fullName" name="fullName" maxlength="50" required>

            <label for="age">سن:</label>
            <input type="number" id="age" name="age" min="18" max="70" required>

            <label for="email">ایمیل:</label>
            <input type="email" id="email" name="email" required>

            <label for="phone">شماره موبایل:</label>
            <input type="text" id="phone" name="phone" pattern="^09\d{9}$" required>

            <label for="password">رمزعبور:</label>
            <input type="password" id="password" name="password" required>

            <button type="submit">ثبت‌نام</button>
        </form>
        <div id="message" class="message"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
Mma123 دانلود HTML & CSS

بخش جاوااسکریپت اصلا ارسال نشده Amirhn


<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اعتبارسنجی فرم با جاوااسکریپت</title>

    <style>
        body {
            padding: 0;
            margin: 0;
        }

        section {
            width: 100%;
            max-width: 400px;
            background-color: rgba(0, 132, 255, 0.25);
            padding: 10px;
            margin: 10px auto;
            border-radius: 10px;
        }

        section h1 {
            margin: 5px 10px 20px 10px;
        }

        section div {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        section div label {
            width: 100px;
        }

        section div input {
            width: 200px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: none;
            padding: 5px;
        }

        section input[type='submit'] {
            border: none;
            border-radius: 5px;
            padding: 5px 20px;
            width: 90%;
            max-width: 325px;
            margin: auto;
            display: block;
            border: 2px solid white;
        }

        section input[type='submit']:hover {
            border: 2px solid blue;

        }
    </style>
</head>

<body>
    <section>
        <h1>فرم ثبت نام</h1>

        <form action="#" method="post" onsubmit="return register();">
            <div>
                <label>نام و نام خانوادگی</label>
                <input type="text" id="name" placeholder="هوشنگ هوشنگی" required>
            </div>

            <div>
                <label>سن</label>
                <input type="number" id="age" placeholder="18-70" required>
            </div>

            <div>
                <label>ایمیل</label>
                <input type="text" id="email" placeholder="info@example.com" required>
            </div>


            <div>
                <label>شماره موبایل</label>
                <input type="number" id="phone" placeholder="09000000000" required>
            </div>

            <div>
                <label>رمز عبور</label>
                <input type="password" id="password" placeholder="*******" required>
            </div>

            <input type="submit" value="ثبت نام">

        </form>
    </section>

    <script>
        const name = document.querySelector('#name')
        const age = document.querySelector('#age')
        const email = document.querySelector('#email')
        const phone = document.querySelector('#phone')
        const password = document.querySelector('#password')

        const register = () => {
            if (name.value.length > 50) {
                alert('نام و نام خانوادگی حداکثر 50 کاراکتر باید باشه')
                return false
            }
            if (parseInt(age.value) > 70 || parseInt(age.value) < 18) {
                alert('سن باید بین 18 تا 70 باشه')
                return false
            }

            if (email.value.indexOf("@") == -1) {
                alert('ایمیل نامعتبر است @ نداره ')
                return false
            }
            let email_domain = email.value.substring(email.value.indexOf("@") + 1)
            if (email_domain.indexOf(".") == -1) {
                alert('ایمیل نامعتبر است . نداره')
                return false
            }


            if (!phone.value.startsWith('09')) {
                alert('شماره موبایل باید با 09 شروع بشه')
                return false
            }
            if (phone.value.length != 11) {
                alert('شماره موبایل باید 11 رقم باشد')
                return false
            }


            if (password.value.length < 8) {
                alert('پسورد باید حداقل 8 کاراکتر باشد')
                return false
            }

            const reg1 = /[a-z]/g;
            const reg2 = /[A-Z]/g;
            const reg3 = /[0-9]/g;

            if (!reg1.test(password.value)) {
                alert('حروف کوچک انگلیسی در پسورد وجود ندارد')
                return false
            }
            if (!reg2.test(password.value)) {
                alert('حروف بزرگ انگلیسی در پسورد وجود ندارد')
                return false
            }
            if (!reg3.test(password.value)) {
                alert('عددی در پسورد وجود ندارد')
                return false
            }

            if (password.value.indexOf('#') == -1) {
                alert('علامت # در پسورد وجود ندارد')
                return false
            }

            return true
        }

    </script>
</body>

</html>

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

مطالب مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن