اعتبار سنجی فرم با جاوا اسکریپ
سلام من میخام برای فرم ثبت نام تو جاوا اسکریپت اعتبار سنجی کنم که 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>
پاسخ‌ها
7
<!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>الان مشکل تون چیه؟
واسه مقدار کلمه عبور و تکرارش هم کد برابر بودن رو اضافه کنید، دیگه تمومه دیگه.
@milad
خب راهنمایی برای همین میخام که چطوری چک کنم برابر هست یا نه
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
دیدم بخش مشکل تر رو خودتون حل کردید، فکر کردم بخش باقی مانده رو هم خودتون بلدید.
من براساس کدهای خودتون اعتبارسنجی تساوی تکرار کلمه عبور رو هم اضافه کردم در بالا.
@milad
ممنونم
سرزنده باشین 👍
سلام
من از کد های بالا بخش زیر رو در برای اعتبار سنجی فرم استفاده کردم چطور میشه تکمیل ترش کرد تا علاوه بر محدودیت تعداد کاراکتر در صورتی که نام کاربری عدد باشه اون رو هم محدود کنه یعنی نام کاربری این دو شرط رو نداشت (اگر عدد بین 0 تا 9 نبودو اگر بین 5 تا 15 کاراکتر نداشت ) پیام هشدار به کاربر بده
if(user.value.length < 5 || user.value.length > 15){
usererror.textContent = 'نام کاربری باید 5 تا 15 کاراکتر باشد.';
event.preventDefault();