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

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

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

تمرین آسان 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>
Amirhn دانلود JavaScript HTML & CSS

ارسال جواب

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

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

مطالب مرتبط

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

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن