پیاده سازی منطق فرم پیچیده بدون زحمت با forms.js 🚀

در دنیای توسعه وب، فرم‌ها نقاط کلیدی تعامل کاربر هستند و اطلاعات لازم را جمع‌آوری می‌کنند که فرآیندهای تجاری و ورودی‌های سیستم را هدایت می‌کنند. با این حال، به همان اندازه که اشکال ممکن است ساده به نظر برسند، منطق زیربنایی آنها می تواند به سرعت از نظر پیچیدگی مقیاس شود. از فیلدهای شرطی که بر اساس پاسخ‌های قبلی ظاهر می‌شوند تا اعتبارسنجی بلادرنگ که ورودی کاربر را در برابر رکوردهای پایگاه داده بررسی می‌کند. مدیریت رفتار فرم می تواند به یک کار دلهره آور تبدیل شود، به خصوص در برنامه های کاربردی در مقیاس بزرگ.

اینجاست که forms.js وارد بازی می شود. forms.js که با هدف تسهیل توسعه و مدیریت فرم های وب ایجاد شده است، یک کتابخانه جاوا اسکریپت قوی است که برای ساده سازی ایجاد و مدیریت فرم های پویا طراحی شده است. چه در حال ساخت یک فرم تماس ساده یا یک فرآیند برنامه چند مرحله ای پیچیده باشید، forms.js مجموعه ای از ابزارها را ارائه می دهد که اجرای آن حتی پیچیده ترین منطق فرم را بدون دردسر آسان می کند.

به‌عنوان توسعه‌دهنده اصلی و سازنده forms.js، با رشد پروژه‌ها، بسیاری از فرم‌ها را دیده‌ام که از ساده به غیرقابل مدیریت می‌شوند. اگر می توانید با این موضوع ارتباط برقرار کنید، ممکن است وقت آن رسیده باشد که کتابخانه ما را امتحان کنید. بیایید بررسی کنیم که forms.js چگونه می‌تواند به شما در مدیریت مؤثرتر فرم‌های وب کمک کند و از تجربه کاربری روان و قابل دسترس اطمینان حاصل کند.

چرا forms.js؟

اگر هنوز متقاعد نشده‌اید، می‌توانیم چند نکته مثبت را بررسی کنیم که forms.js می‌تواند در پروژه شما بیاورد.

ساده سازی کد منبع

کتابخانه ما می تواند به طور قابل توجهی خوانایی کد را بهبود بخشد. شما می توانید چند هزار فرم خطی به هم ریخته را فراموش کنید که در آن یافتن منطق پنهان به اندازه قرار ملاقات بعدی دندانپزشک شما لذت بخش است.

راحتی در استفاده

برای کار با این کتابخانه، اگر می دانید، لازم نیست در جاوا اسکریپت متخصص باشید json ورودی شما در حال حاضر خوب هستید.

قابلیت گسترش

این واقعیت که استفاده از اصول اولیه بسیار ساده است به این معنی نیست که توسعه دهندگان با تجربه نمی توانند از قدرت کتابخانه استفاده کنند. یک سیستم افزونه پیاده سازی شده است که به هر کسی اجازه می دهد تا افزونه های سفارشی بنویسد و استفاده کند. افزونه‌ها می‌توانند از ویژگی‌هایی مانند اعتبارسنجی، منطق شرطی و مدیریت داده‌ها استفاده کنند که همگی توسط کتابخانه مدیریت می‌شوند و شما فقط می‌توانید روی آنچه نیاز دارید تمرکز کنید.

عملکرد بالا در اندازه سبک وزن

با وجود ویژگی‌های قدرتمند، forms.js سبک وزن است و تأثیر کمتری بر عملکرد پروژه شما دارد.

شما می توانید اسناد کامل را در وب سایت ما بیابید که در آن همه ویژگی ها لیست شده و توضیح داده شده است.

منبع باز است و به طور مداوم در حال بهبود است

به عنوان یک پروژه منبع باز میزبانی شده در github، forms.js به طور مداوم توسط توسعه دهندگان در سراسر جهان بهبود می یابد. این تلاش مشترک تضمین می کند که کتابخانه با آخرین فن آوری های وب و بهترین شیوه ها به روز می ماند.

شروع کار با forms.js

ما انتظار داریم که از NPM در پروژه خود استفاده کنید، اگر اسناد را برای اطلاعات بیشتر در مورد سایر ابزارهای گنجاندن کتابخانه در پروژه خود بررسی نکنید.

ابتدا بیایید بسته را در پروژه خود نصب کنیم:

npm i @forms.js/core

سپس در فایل های جاوا اسکریپت، واردات بسته را در دسترس خواهیم داشت.
کلاس اصلی نامیده می شود Form و مسئول اولیه سازی و مدیریت رفتار فرم است.

import { Form } from '@forms.js/core';

اگر بخواهیم از سبک های پیش فرض forms.js استفاده کنیم، می توانیم فایل css را نیز وارد کنیم.

@import "@forms.js/core/css/index.css";

چند دقیقه و ما می توانیم از قبل شروع به ایجاد فرم کنیم. برای نشان دادن اینکه ایجاد چقدر ساده است در زیر یک کد برای یک فرم ورود وجود دارد.

import { Form } from "https://esm.sh/@forms.js/core";

new Form("login-form", {
  id:"login-form",
  schema: [
    {
      id: "username",
      type:"text",
      label: "Username",
      required: true,
    },
    {
      id: "password",
      type:"password",
      label: "Password",
      required: true,
    },
    {
      id: "rememberUser",
      type:"checkbox",
      label: "Remember me",
      toggle: true,
    },
    {
      id:"buttonGroup",
      type:"group",
      schema:[
         {
            id: "loginButton",
            type:"button",
            template: "Login",
        },   
      ]
    }
  ]
});

Deep Dive: Implementing Complex Form Logic

در حالی که forms.js مدیریت فرم را ساده می کند، قدرت واقعی آن در مدیریت بی دردسر منطق فرم پیچیده است که می تواند با رویکردهای سنتی دلهره آور باشد. ما فیلدهای فرم پویا را بر اساس ورودی کاربر، و اعتبارسنجی داده‌های هم‌زمان، که هرکدام با تکه‌های کد دقیق همراه هستند، بررسی می‌کنیم.

به عنوان مثال ما یک فرم ثبت نام برای محصول SaaS ایجاد می کنیم. در این SaaS فرضی به عنوان یک سوپر ادمین شما می توانید کاربران را تحت شرکت خود ثبت کنید و این فرمی است که ما خواهیم ساخت. فرم دارای فیلدهای زیر خواهد بود:

• نقش – انتخاب – نقشی که کاربر در سیستم خواهد داشت، لازم است
• اطلاعات شخصی
  • نام – متن، لازم است
  • نام خانوادگی – متن، الزامی است
  • ایمیل – ایمیل معتبر
• جزئیات تماس – اگر نقشی مهمان نباشد قابل مشاهده است
  • شماره تلفن – شماره تلفن معتبر – اگر نقش مهمان نباشد، لازم است
  • آدرس – متن برای ساده سازی
• اعتبار مدیر – اگر نقشی مدیر باشد قابل مشاهده است
  • رمز عبور – رمز عبور معتبر
• شرایط و ضوابط – چک باکس – قبل از ارسال الزامی است

این لیست از فیلدها اساساً طرح واره فرم است، فقط باید آن را در ورودی صحیح بنویسیم.

با تعریف قسمت انتخاب نقش شروع می کنیم:

const registrationFormSchema = [
    {
        id: "role",
        type: "select",
        default: "user",
        optionsList: [
            {
                value: "guest",
                label: "Guest",
            },
            {
                value: "user",
                label: "User",
            },
            {
                value: "admin",
                label: "Admin",
            },
        ]
    }
];

پس از آن می توانیم اجرای بقیه منطق را شروع کنیم، شرایط زیادی بر اساس این قسمت انتخاب نقش خواهد بود. ما می‌توانیم فیلدها را در گروه‌ها گروه‌بندی کنیم تا امکان جداسازی بهتر فیلدها فراهم شود. منطق شرطی در اینجا مستند شده است.

const registrationFormSchema = [
    // previous field implementation,
    {
        id: "personalInformation",
        type: "group",
        schema: [
            {
                id: "firstName",
                type: "text",
                label: "First Name",
                required: true,
            },
            {
                id: "lastName",
                type: "text",
                label: "Last Name",
                required: true,
            },
            {
                id: "email",
                type: "email",
                label: "Email",
                required: true,
            },
        ]
    },
    {
        id: "contactInformation",
        type: "group",
        conditions: (data)=>{
            return data.role !== 'guest';
        },
        schema: [
            {
                id: "phoneNumber",
                type: "tel",
                label: "Phone Number"
            },
            {
                id: "address",
                type: "text",
                label: "Address"
            },
        ]
    }
];

می بینیم که تعریف کرده ایم conditions پارامتر در گروه مخاطب به عنوان تابعی که برمی گردد boolean ارزش. وقتی تابع true را برمی گرداند، فیلد قابل مشاهده است، اگر false برگرداند، فیلد پنهان می شود. حالا می‌توانیم بقیه فیلدها را تمام کنیم، یک اعتبارسنجی سفارشی برای فیلدهای رمز عبور و شرایط اجرا می‌کنیم.

const registrationFormSchema = [
    // previous field implementation,
    {
        id: "adminCredentials",
        type: "group",
        conditions: (data)=>{
            return data.role === 'admin';
        },
        schema: [
            {
                id: "password",
                type: "password",
                label: "Admin Password",
                required: (value, data)=>{
                    return data.role === "admin";
                },
                validation: (value, data, required) => {
                    if(required && !value){
                        return "This field is required";
                    }
                    if(value && !value.match(/^(?=.*[0-9])$/)){
                        return "Password must include at least one number";
                    }
                    return true;
                }               
            },
        ]
    },
    {
        id: "terms",
        type: "checkbox",
        label: "I agree to the terms and conditions",
        required: true,
        validation: (value, data, required) => {
            if(required && !value){
                return "You need to agree with terms and conditions to submit the form";
            }
            return true;
        }
    },
];

برای فیلد رمز عبور ما یک سفارشی تعریف کرده ایم required تابعی که می گوید فیلد فقط زمانی مورد نیاز است که نقش باشد admin. الف را نیز اجرا کرده ایم validation که بررسی می کند آیا رمز عبور شامل هر کاراکتری است یا خیر. تابع اعتبار سنجی اگر فیلد معتبر باشد، مقدار true را برمی گرداند، در غیر این صورت رشته ای را با خطا برمی گرداند. ما منطق مشابهی را در قسمت اصطلاحات اعمال کرده ایم و خطای اعتبارسنجی سفارشی را نیز در آنجا تعریف کرده ایم.

اکنون فقط یک دکمه ارسال اضافه می کنیم و فرم را مقداردهی اولیه می کنیم. در زیر می توانید کدپن را با این راه حل پیدا کنید.

import { Form } from "https://esm.sh/@forms.js/core";

const registrationFormSchema = [
    // previous field implementation,
    {
      id:"buttonGroup",
      type:"group",
      schema:[
         {
            id: "submitButton",
            type:"button",
            template: "Create",
        },   
      ]
    }
];

const form = new Form("form", {
  id:"registrationForm",
  schema: registrationFormSchema,
});

نتیجه

ادغام forms.js در ابزارهای مدیریت پروژه شما نه تنها مدیریت فرم های پیچیده را ساده می کند، بلکه تجربه کاربر را با تعاملی تر و پاسخگوتر می کند. همانطور که در این مقاله بررسی کردیم، forms.js چارچوبی قوی برای مدیریت پویا ورودی‌های فرم، اعمال اعتبارسنجی بلادرنگ، و انطباق رفتار فرم بر اساس تعاملات کاربر ارائه می‌کند. این قابلیت‌ها برای پلتفرم‌ها و برنامه‌های امروزی، به‌ویژه در مناطقی که نیاز به جمع‌آوری و پردازش دقیق داده‌ها مانند مدیریت پروژه دارند، بسیار مهم هستند.

با استفاده از forms.js، توسعه دهندگان می توانند زمان و تلاش صرف شده برای کدنویسی مربوط به فرم را به میزان قابل توجهی کاهش دهند و در عین حال دقت و کاربرپسندی برنامه های خود را بهبود بخشند. دفعه بعد کاربرد forms.js را در پروژه های بزرگ بررسی می کنیم و با استفاده از ویژگی های برتر فرم چند صفحه ای ایجاد می کنیم.

اگر سؤالی دارید یا فقط می خواهید سلام کنید، لطفاً در مورد پروژه github ما بحثی ایجاد کنید. ما از همه مشارکت‌ها و تلاش مداوم برای بهبود کتابخانه بسیار قدردانی می‌کنیم. همچنین می توانید اطلاعات بیشتر در مورد پروژه را در وب سایت forms.js بیابید

در نهایت، اگر forms.js را در پروژه‌های خود پیاده‌سازی کرده‌اید، تجربیات و نتایج خود را در رسانه‌های اجتماعی یا انجمن‌های فناوری به اشتراک بگذارید. بینش و بازخورد شما برای کمک به دیگران برای درک مزایای بالقوه استفاده از forms.js و پیشبرد تکامل این ابزار قدرتمند بسیار ارزشمند است.