فرمی بسازید که موارد زیر را از کاربر دریافت کند و این فرم را اعتبارسنجی کند
نام و نام خانوادگی (حداکثر ۵۰ کاراکتر)
سن (بین ۱۸ تا ۷۰)
ایمیل (در فرمت ایمیل)
شماره موبایل (شروع با ۰۹ و ۱۱ رقم)
رمزعبور (حداقل ۸ کاراکتر، شامل #، عدد و حروف بزرگ و کوچک انگلیسی)
<!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>
دانلود
Python - پایتون
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!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>
<form id="userForm">
<label for="name">نام و نام خانوادگی:</label>
<input type="text" id="name" maxlength="50" required>
<label for="age">سن:</label>
<input type="number" id="age" min="18" max="70" required>
<label for="email">ایمیل:</label>
<input type="email" id="email" required>
<label for="phone">شماره موبایل:</label>
<input type="text" id="phone" pattern="09\d{9}" required>
<label for="password">رمزعبور:</label>
<input type="password" id="password" minlength="8" required>
<button type="submit">ارسال</button>
</form>
<script>
document.getElementById('userForm').onsubmit = function() {
const password = document.getElementById('password').value;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#]).{8,}$/;
if (!passwordRegex.test(password)) {
alert('رمزعبور باید شامل حداقل ۸ کاراکتر، یک عدد، یک حرف بزرگ، یک حرف کوچک و یک علامت خاص باشد.');
return false;
}
return true;
};
</script>
جوابت را با Markdown بنویس و ثبت کن
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نامتوضیح کوتاهی بنویسید تا تیم بررسی کند.