فرم‌ها و ورودی‌ها
فرم‌ها و ورودی‌ها در ویو جی‌اس (Vue.js) نقش حیاتی در تعامل کاربر با برنامه‌های وب ایفا می‌کنند. آن‌ها امکان دریافت داده از کاربر، اعتبارسنجی و پردازش آن داده‌ها را فراهم می‌کنند. استفاده از v-model در Vue.js باعث می‌شود که بین ورودی‌های فرم و داده‌های مدل دوطرفه‌ی بایندینگ برقرار شود، به این معنی که هر تغییری در داده‌ها فوراً در UI منعکس می‌شود و بالعکس. این ویژگی باعث کاهش نیاز به به‌روزرسانی دستی DOM و افزایش کارایی برنامه می‌شود.
فرم‌ها در انواع مختلفی از پروژه‌ها مانند سیستم‌های ثبت‌نام، ورود، جستجو یا صفحات پیکربندی مورد استفاده قرار می‌گیرند. در این آموزش، یاد می‌گیریم چگونه فرم‌ها را در ویو جی‌اس بسازیم، ورودی‌ها را مدیریت کنیم و داده‌ها را به شیوه‌ای ایمن و بهینه پردازش کنیم. مفاهیم پیشرفته‌ای مانند ساختار داده، الگوریتم‌ها و اصول برنامه‌نویسی شیء‌گرا در طراحی فرم‌ها و اعتبارسنجی آن‌ها کاربرد دارند.
پس از پایان این آموزش، شما قادر خواهید بود فرم‌های واکنش‌گرا، ایمن و آماده تولید ایجاد کنید و از آن‌ها در پروژه‌های Vue.js استفاده نمایید. همچنین بهترین شیوه‌های مدیریت خطا، بهینه‌سازی عملکرد و امنیت فرم‌ها را خواهید آموخت که برای توسعه مقیاس‌پذیر و حرفه‌ای برنامه‌های وب ضروری است.
مثال پایه <template>
text<div>
<h2>فرم ثبت‌نام ساده</h2>
<form @submit.prevent="submitForm">
<label for="username">نام کاربری:</label>
<input type="text" id="username" v-model="user.username" required />
<label for="email">ایمیل:</label>
<input type="email" id="email" v-model="user.email" required />
<button type="submit">ارسال</button>
</form>
<p v-if="submitted">با موفقیت ارسال شد: {{ user.username }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
username: '',
email: ''
},
submitted: false
}
},
methods: {
submitForm() {
if(this.user.username && this.user.email) {
this.submitted = true;
}
}
}
}
</script>در این مثال، v-model بین ورودی‌ها و مدل داده‌ها بایندینگ دوطرفه ایجاد می‌کند، به طوری که تغییرات در فرم فوراً در داده‌ها منعکس می‌شود. @submit.prevent از ارسال پیش‌فرض فرم جلوگیری می‌کند و امکان تعریف منطق سفارشی برای ارسال را فراهم می‌سازد. پرچم submitted وضعیت فرم را پیگیری می‌کند و پس از ارسال موفقیت‌آمیز، پیام بازخوردی به کاربر نمایش می‌دهد. متد submitForm بررسی می‌کند که هر دو فیلد پر شده باشند و نشان می‌دهد که چگونه Vue.js امکان مدیریت واکنش‌گرا و ایمن فرم‌ها را فراهم می‌کند.
مثال کاربردی <template>
text<div>
<h2>فرم پیشرفته با اعتبارسنجی</h2>
<form @submit.prevent="submitForm">
<label for="username">نام کاربری:</label>
<input type="text" id="username" v-model="user.username" @input="validateUsername" required />
<span v-if="errors.username" class="error">{{ errors.username }}</span>
<label for="email">ایمیل:</label>
<input type="email" id="email" v-model="user.email" @input="validateEmail" required />
<span v-if="errors.email" class="error">{{ errors.email }}</span>
<label for="password">رمز عبور:</label>
<input type="password" id="password" v-model="user.password" @input="validatePassword" required />
<span v-if="errors.password" class="error">{{ errors.password }}</span>
<button type="submit" :disabled="hasErrors">ارسال</button>
</form>
<p v-if="submitted">با موفقیت ارسال شد: {{ user.username }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: {
username: '',
email: '',
password: ''
},
errors: {},
submitted: false
}
},
computed: {
hasErrors() {
return Object.keys(this.errors).length > 0;
}
},
methods: {
validateUsername() {
this.errors.username = this.user.username.length < 3 ? 'نام کاربری باید حداقل ۳ حرف باشد' : '';
},
validateEmail() {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
this.errors.email = !regex.test(this.user.email) ? 'فرمت ایمیل نامعتبر است' : '';
},
validatePassword() {
this.errors.password = this.user.password.length < 6 ? 'رمز عبور باید حداقل ۶ حرف باشد' : '';
},
submitForm() {
this.validateUsername();
this.validateEmail();
this.validatePassword();
if(!this.hasErrors) {
this.submitted = true;
}
}
}
}
</script>این مثال نشان‌دهنده اعتبارسنجی فرم، مدیریت خطا و بازخورد واکنش‌گرا در UI است. computed property به نام hasErrors، تمامی خطاهای اعتبارسنجی را بررسی کرده و در صورت وجود خطا، دکمه ارسال را غیرفعال می‌کند. متدهای validateUsername، validateEmail و validatePassword به صورت ماژولار سازماندهی شده‌اند و errors object به صورت ریاکتیو پیام‌های خطا را مدیریت می‌کند. این الگو، توسعه فرم‌های مقیاس‌پذیر، ماژولار و ایمن را نشان می‌دهد.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| v-model | بایندینگ دوطرفه بین ورودی و داده‌ها | <input v-model="user.name" /> |
| @input | اجرای اعتبارسنجی یا منطق هنگام تغییر ورودی | <input @input="validateUsername" /> |
| computed | مانیتورینگ دینامیک استیت و بررسی خطاها | hasErrors() { return Object.keys(this.errors).length > 0 } |
| methods | منطق ارسال فرم و اعتبارسنجی | submitForm() { /* Validate and submit */ } |
| v-if | نمایش شرطی پیام خطا یا عناصر UI | <span v-if="errors.email">{{ errors.email }}</span> |
بهترین شیوه‌ها برای فرم‌ها و ورودی‌ها شامل استفاده از v-model برای بایندینگ، متدها برای اعتبارسنجی و computed برای مانیتورینگ استیت می‌باشد. اشتباهات رایج شامل تغییر مستقیم DOM، فقدان اعتبارسنجی و الگوریتم‌های ناکارآمد است. برای بهینه‌سازی عملکرد از محاسبات غیرضروری اجتناب کنید، ساختار داده‌ها را بهینه نگه دارید و چرخه عمر کامپوننت‌ها را به درستی مدیریت کنید. اعتبارسنجی همزمان سمت کاربر و سرور امنیت فرم‌ها را افزایش می‌دهد. ابزار Vue Devtools برای بررسی استیت واکنش‌گرا و داده‌های کامپوننت توصیه می‌شود.
با یادگیری فرم‌ها و ورودی‌ها، شما قادر خواهید بود فرم‌های واکنش‌گرا، ایمن و آماده تولید ایجاد کنید. این مهارت امکان توسعه فرم‌های ثبت‌نام، ورود، جستجو و صفحات پیکربندی را به شکل ماژولار و مقیاس‌پذیر فراهم می‌کند. مراحل بعدی یادگیری می‌تواند شامل تولید فرم‌های داینامیک، ارتباط بین کامپوننت‌ها، مدیریت استیت با Vuex یا Pinia و بهینه‌سازی پیشرفته عملکرد باشد.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود