paradox

4 سال پیش توسط paradox مطرح شد

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

سلام من میخام برای فرم ثبت نام تو جاوا اسکریپت اعتبار سنجی کنم که input ها پر هست یا خالی
تو این کدها میشه دوتا خط ارور نوشت یکی مربوط به همین پیغامی که هست اینجا یکی هم میخام اگه رو submit کلیک شد این متن باشه (فیلد نام نمیتواند خالی باشد)

و همینطور برای پسورد و تکرار پسورد میخام چک کنه یکی هست یا نه

<html>
<head>

<style>

body{
  direction: rtl;
  font-family: Calibri , Arial
}

label{
  display: inline-block;
  width:80px;
}

button{
  font-size:16px;
  font-family: Calibri , Arial
}

span{
  color: red;
}
</style>

</head>

<body>

<form>
    <label>نام کاربری</label>
    <input type="text" name="user" id="user" />
    <span id="usererror"></span><br /><br />
    <label>کلمه‌ی عبور</label>
    <input type="password" name="pass" id="pass" />
    <span id="passerror"></span><br /><br />
    <button type="submit">ورود</button>
</form>

 <script>
 const form = document.querySelector('form');
form.addEventListener('submit' , validate);

function validate(event){
    const user = document.getElementById('user');
    const pass = document.getElementById('pass');
    const usererror = document.getElementById('usererror');
    const passerror = document.getElementById('passerror');
    usererror.textContent = '';
    passerror.textContent = '';
    if(user.value.length < 5 || user.value.length > 15){
        usererror.textContent = 'نام کاربری باید 5 تا 15 کاراکتر باشد';
        event.preventDefault();
    }
    if(pass.value.length < 6 || pass.value.length > 20){
        passerror.textContent ='کلمه‌ی عبور باید 6 تا 20 کاراکتر باشد';
        event.preventDefault();
    }
}
 </script>
</body>
</html>

ثبت پرسش جدید

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

<!doctype html>
<html lang="en" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>

body{
  direction: rtl;
  font-family: Calibri , Arial
}

label{
  display: inline-block;
  width:80px;
}

button{
  font-size:16px;
  font-family: Calibri , Arial
}

span{
  color: red;
}
</style>

</head>

<body>

<form>
    <label>نام کاربری</label>
    <input type="text" name="user" id="user" />
    <span id="usererror"></span><br /><br />
    <label>کلمه‌ی عبور</label>
    <input type="password" name="pass" id="pass" />
    <label>تکرار کلمه‌ی عبور</label>
    <input type="password" name="pass" id="passCheck" />
    <span id="passerror"></span><br /><br />
    <button type="submit">ورود</button>
</form>

 <script>
 const form = document.querySelector('form');
form.addEventListener('submit' , validate);

function validate(event){
    const user = document.getElementById('user');
    const pass = document.getElementById('pass');
    const passCheck = document.getElementById('passCheck');
    const usererror = document.getElementById('usererror');
    const passerror = document.getElementById('passerror');
    usererror.textContent = '';
    passerror.textContent = '';
    if(user.value.length < 5 || user.value.length > 15){
        usererror.textContent = 'نام کاربری باید 5 تا 15 کاراکتر باشد.';
        event.preventDefault();
    }
    if(pass.value.length < 6 || pass.value.length > 20){
        passerror.textContent ='کلمه‌ی عبور باید 6 تا 20 کاراکتر باشد.';
        event.preventDefault();
    }
    if(pass.value !== passCheck.value){
        passerror.textContent += ' کلمه های عبور باهم تطابق ندارند.';
        event.preventDefault();
    }
}
 </script>
</body>
</html>

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

الان مشکل تون چیه؟
واسه مقدار کلمه عبور و تکرارش هم کد برابر بودن رو اضافه کنید، دیگه تمومه دیگه.

ارسال پاسخ

paradox

@wxyz4367 4 سال پیش مطرح شد

@milad
خب راهنمایی برای همین میخام که چطوری چک کنم برابر هست یا نه

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

<!doctype html>
<html lang="en" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>

body{
  direction: rtl;
  font-family: Calibri , Arial
}

label{
  display: inline-block;
  width:80px;
}

button{
  font-size:16px;
  font-family: Calibri , Arial
}

span{
  color: red;
}
</style>

</head>

<body>

<form>
    <label>نام کاربری</label>
    <input type="text" name="user" id="user" />
    <span id="usererror"></span><br /><br />
    <label>کلمه‌ی عبور</label>
    <input type="password" name="pass" id="pass" />
    <label>تکرار کلمه‌ی عبور</label>
    <input type="password" name="pass" id="passCheck" />
    <span id="passerror"></span><br /><br />
    <button type="submit">ورود</button>
</form>

 <script>
 const form = document.querySelector('form');
form.addEventListener('submit' , validate);

function validate(event){
    const user = document.getElementById('user');
    const pass = document.getElementById('pass');
    const passCheck = document.getElementById('passCheck');
    const usererror = document.getElementById('usererror');
    const passerror = document.getElementById('passerror');
    usererror.textContent = '';
    passerror.textContent = '';
    if(user.value.length < 5 || user.value.length > 15){
        usererror.textContent = 'نام کاربری باید 5 تا 15 کاراکتر باشد.';
        event.preventDefault();
    }
    if(pass.value.length < 6 || pass.value.length > 20){
        passerror.textContent ='کلمه‌ی عبور باید 6 تا 20 کاراکتر باشد.';
        event.preventDefault();
    }
    if(pass.value !== passCheck.value){
        passerror.textContent += ' کلمه های عبور باهم تطابق ندارند.';
        event.preventDefault();
    }
}
 </script>
</body>
</html>

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

دیدم بخش مشکل تر رو خودتون حل کردید، فکر کردم بخش باقی مانده رو هم خودتون بلدید.
من براساس کدهای خودتون اعتبارسنجی تساوی تکرار کلمه عبور رو هم اضافه کردم در بالا.

ارسال پاسخ

paradox

@wxyz4367 4 سال پیش مطرح شد

@milad
ممنونم

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

سرزنده باشین 👍

ارسال پاسخ

safa

تخصص : برو سؤال بعدی

@ktm.sem 3 سال پیش مطرح شد

سلام
من از کد های بالا بخش زیر رو در برای اعتبار سنجی فرم استفاده کردم چطور میشه تکمیل ترش کرد تا علاوه بر محدودیت تعداد کاراکتر در صورتی که نام کاربری عدد باشه اون رو هم محدود کنه یعنی نام کاربری این دو شرط رو نداشت (اگر عدد بین 0 تا 9 نبودو اگر بین 5 تا 15 کاراکتر نداشت ) پیام هشدار به کاربر بده

 if(user.value.length < 5 || user.value.length > 15){
        usererror.textContent = 'نام کاربری باید 5 تا 15 کاراکتر باشد.';
event.preventDefault();

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید