کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **اعتبارسنجی فرم (Form Validation) با JavaScript**
در این پروژه، یک فرم ساده ایجاد می‌کنیم که شامل اعتبارسنجی برای ورودی‌های آن است. این فرم شامل نام، ایمیل و شماره تلفن می‌باشد. با استفاده از JavaScript، داده‌های ورودی را بررسی می‌کنیم و پیام‌های خطا را به کاربر نمایش می‌دهیم.
### 1. **HTML**
ابتدا ساختار HTML را برای فرم اعتبارسنجی ایجاد می‌کنیم.
```html
اعتبارسنجی فرم
```
### 2. **CSS**
برای طراحی ظاهری فرم و پیام‌های خطا از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
```
### 3. **JavaScript**
سپس منطق اعتبارسنجی فرم را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر
const form = document.getElementById('validationForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const phoneInput = document.getElementById('phone');
const nameError = document.getElementById('nameError');
const emailError = document.getElementById('emailError');
const phoneError = document.getElementById('phoneError');
// تابع برای اعتبارسنجی فرم
function validateForm(event) {
// جلوگیری از ارسال فرم
event.preventDefault();
// پاک کردن پیام‌های خطا
nameError.textContent = '';
emailError.textContent = '';
phoneError.textContent = '';
let isValid = true;
// اعتبارسنجی نام
if (nameInput.value.trim() === '') {
nameError.textContent = 'لطفا نام خود را وارد کنید.';
isValid = false;
}
// اعتبارسنجی ایمیل
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(emailInput.value)) {
emailError.textContent = 'لطفا یک ایمیل معتبر وارد کنید.';
isValid = false;
}
// اعتبارسنجی شماره تلفن
const phonePattern = /^\d{10}$/; // فرض بر این است که شماره تلفن باید 10 رقم باشد
if (!phonePattern.test(phoneInput.value)) {
phoneError.textContent = 'لطفا شماره تلفن معتبر وارد کنید.';
isValid = false;
}
// ارسال فرم در صورت معتبر بودن
if (isValid) {
alert('فرم با موفقیت ارسال شد!');
form.reset(); // پاک کردن فرم
}
}
// افزودن رویداد ارسال به فرم
form.addEventListener('submit', validateForm);
```
### توضیحات کد:
1. **HTML**:
- شامل نام، ایمیل و شماره تلفن است و برای هر ورودی یک بخش پیام خطا وجود دارد.
2. **CSS**:
- طراحی ساده برای فرم و استایل‌دهی به پیام‌های خطا.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب فرم و ورودی‌ها.
- **تابع اعتبارسنجی**: بررسی ورودی‌ها و نمایش پیام‌های خطا در صورت عدم اعتبار.
- **الگوی اعتبارسنجی**: استفاده از الگوهای منظم برای اعتبارسنجی ایمیل و شماره تلفن.
- **ارسال فرم**: فرم در صورت معتبر بودن ارسال می‌شود و پیام موفقیت نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **اعتبارسنجی فرم** یک مثال عالی برای استفاده از JavaScript در اعتبارسنجی ورودی‌های کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند استفاده از AJAX برای ارسال فرم به سرور یا ذخیره‌سازی محلی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **اعتبارسنجی فرم (Form Validation) با JavaScript** می‌باشد
