استفاده از جاوا اسکریپت و فرم ها

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

• استفاده از جاوا اسکریپت در فرم‌های HTML
• استفاده از Ajax در فرم HTML
• کار با قالب‌های داده در HTML
• تأیید اعتبار
• فریم‌ورک‌ها و کتابخانه‌های جاوا اسکریپت در فرم‌ها
• نتیجه‌گیری

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

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

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

Ajax و JSON

در حالی که XML یکی از اجزای اصلی Ajax در هنگام ظهور بود، معمولاً فرمت امروزی برای تبادل داده نیست. این روزها بیشتر از JSON استفاده می کنیم. Ajaj خیلی خوب به نظر نمی رسد، بنابراین Ajax گیر کرده است. هر زمان که از جاوا اسکریپت برای کنترل تعامل داده ها خارج از رفتار استاندارد مرورگر استفاده می کنیم، یک الگوی Ajax اعمال می شود.

استفاده از جاوا اسکریپت در فرم های HTML

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

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

<form name="myForm" action="" method="GET">
  Enter something in the box: <br>
  <input type="text" name="inputbox" value="">
  <input type="button" name="button" value="Click" onClick="testResults(this.form)">
</form>

function testResults (form) {
    var inputValue = form.inputbox.value;
    alert ("You typed: " + inputValue);
}

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

• 
  
  فرم جدیدی را اعلام می کند:

  • name="myForm" فرم را نامگذاری می کند. در جای دیگر جاوا اسکریپت می توانید به این فرم با نام myForm ارجاع دهید. نامی که فرم خود را می دهید به شما بستگی دارد، اما باید با قوانین استاندارد جاوا اسکریپت برای نامگذاری متغیرها و توابع مطابقت داشته باشد (بدون فاصله، بدون کاراکترهای عجیب و غریب به جز خط زیر و غیره).
  • action="" مشخص می کند که می خواهید مرورگر اطلاعات فرم را به کجا ارسال کند. این فیلد زمانی که تعریف شود یک URL خواهد بود. در این مورد، خالی است زیرا ما در واقع فرم را به جایی نمی فرستیم.
  • method="GET" نحوه ارسال داده‌های روش به مقصد اقدام را مشخص می‌کند. مقادیر ممکن به ترتیب GET و POST هستند که به ترتیب URL-encoded یا body-encoded هستند.
• یک عنصر ورودی را شروع می‌کند:
  • type="text" نوع ورودی را مشخص می کند.
  • name = "inputbox" یک نام به ورودی می دهد که بعداً برای دسترسی به آن استفاده خواهیم کرد.
• یک شی دکمه را تعریف می کند. اگر نوع “ارسال” بود، دکمه به طور خودکار فرم را ارسال می کند:
  • onClick="testResults(this.form)" یک کنترل کننده رویداد است. به مرورگر می‌گوید که وقتی روی دکمه کلیک می‌شود، تابع جاوا اسکریپت داده شده را فراخوانی کند، سپس یک شی را که فرم را نشان می‌دهد ارسال کند.
  • همچنین می‌توان با type=”submit” یک ورودی ایجاد کرد، سپس رویداد onSubmit را ضبط کرد، از رفتار ارسال پیش‌فرض جلوگیری کرد و سپس طبق معمول ادامه داد.
• تابع testResults() در جاوا اسکریپت ما تعریف شده است. با گرفتن فرمی که به عنوان آرگومان ارسال شده و سپس به inputbox.value نگاه می کند، مقدار را در فیلد ورودی به دست می آورد. این مدل استاندارد شی مرورگر (BOM) برای شی فرم است: فرم دارای یک فیلد با نام هر ورودی است و مقدار مقدار آن ورودی را نگه می‌دارد.

• name="myForm" فرم را نامگذاری می کند. در جای دیگر جاوا اسکریپت می توانید به این فرم با نام myForm ارجاع دهید. نامی که فرم خود را می دهید به شما بستگی دارد، اما باید با قوانین استاندارد جاوا اسکریپت برای نامگذاری متغیرها و توابع مطابقت داشته باشد (بدون فاصله، بدون کاراکترهای عجیب و غریب به جز خط زیر و غیره).
• action="" مشخص می کند که می خواهید مرورگر اطلاعات فرم را به کجا ارسال کند. این فیلد زمانی که تعریف شود یک URL خواهد بود. در این مورد، خالی است زیرا ما در واقع فرم را به جایی نمی فرستیم.
• method="GET" نحوه ارسال داده‌های روش به مقصد اقدام را مشخص می‌کند. مقادیر ممکن به ترتیب GET و POST هستند که به ترتیب URL-encoded یا body-encoded هستند.

• type="text" نوع ورودی را مشخص می کند.
• name = "inputbox" یک نام به ورودی می دهد که بعداً برای دسترسی به آن استفاده خواهیم کرد.

• onClick="testResults(this.form)" یک کنترل کننده رویداد است. به مرورگر می‌گوید که وقتی روی دکمه کلیک می‌شود، تابع جاوا اسکریپت داده شده را فراخوانی کند، سپس یک شی را که فرم را نشان می‌دهد ارسال کند.
• همچنین می‌توان با type=”submit” یک ورودی ایجاد کرد، سپس رویداد onSubmit را ضبط کرد، از رفتار ارسال پیش‌فرض جلوگیری کرد و سپس طبق معمول ادامه داد.

عملیات فرم در جاوا اسکریپت

بیایید یک دقیقه به بحث در مورد ویژگی action در فرم اختصاص دهیم. وقتی با رفتار پیش‌فرض مرورگر کنترل می‌شود، فیلد اقدام یک URL است که به مرورگر می‌گوید داده‌ها را کجا ارسال کند. هنگامی که کنترل داده ها را با جاوا اسکریپت و آژاکس به دست می گیریم، به صورت دستی مشخص می کنیم که قرار است اطلاعات را به کجا ارسال کنیم (یک راه استفاده از فیلد داده با یک تماس fetch است، که من نشان خواهم داد. به زودی).

گاهی اوقات، URL را روی فرم می‌بینید، و سپس جاوا اسکریپت به صورت برنامه‌نویسی مقدار را از فیلد اقدام فرم می‌کشد تا به عنوان مقصد درخواست Ajax استفاده شود. همیشه می توانید با نگاه کردن به فیلد عمل، اکشن فرم را پیدا کنید. به عنوان مثال: document.getElementById(myForm).action.

استفاده از Ajax در فرم HTML

حالا اجازه دهید کار کمی جالب‌تر با داده‌های موجود در فرم خود انجام دهیم. برای شروع، می‌توانیم آن را به یک API راه دور برای برخی از Ajax ساده ارسال کنیم. ما از نقطه پایانی https://echo.zuplo.io استفاده خواهیم کرد، که هر آنچه را که به دست می آورد را می گیرد و بازتاب می دهد. ما جاوا اسکریپت خود را طوری تغییر می دهیم که شبیه لیست ۲ باشد و اصلاً نیازی به تغییر HTML نداریم. (همچنین می توانید نسخه زنده را اینجا بررسی کنید.)

function testResults (form) {
  var inputValue = form.inputbox.value;
  fetch("https://echo.zuplo.io/", {
    method: "PUT",
    body: "Very interesting: " + inputValue
}).then((response) => response.text())
  .then((responseText) => {
    alert(responseText);
  })
  .catch((error) => {
    console.error("foo: " + error)
  })
}

در فهرست ۲، ابتدا با گرفتن مقدار از ورودی فرم، همین کار را انجام می دهیم. اما به جای نمایش آن در یک هشدار، از واکشی استفاده می کنیم. API برای ارسال آن به سرویس راه دور ما. سپس از وعده‌های fetch (از طریق زنجیره .then fluent) برای انجام کاری با پاسخ استفاده می‌کنیم. در مورد ما، ما فقط یک هشدار را باز می کنیم. اما ما در اینجا ماهیت Ajax و پردازش داده های فرم ناهمزمان را دیدیم. توانایی کنترل دقیق داده‌ها و شبکه مانند این ویژگی قطعی است که جلوی‌های مدرن را قادر می‌سازد.

API Fetch

Fetch API و روش fetch() آن در مرورگرها تعبیه شده است. به عنوان یک مبتدی، نام “فچ” کمی گمراه کننده است. این API فقط واکشی نمی‌شود. تقریباً هر نوع ارتباطی را که نیاز دارید انجام می دهد، از جمله استفاده از روش HTTP PUT همانطور که در اینجا انجام می دهیم. Fetch API جانشین مدرن XMLHttpRequest() قبلی است. نه تنها به خوبی جایگزین API می شود، بلکه به اندازه کافی قدرتمند است که از نیاز به کتابخانه شخص ثالث مانند Axios در بسیاری از موارد.

کار با قالب های داده در HTML

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

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

با فرض اینکه ما در مورد یک بدنه JSON تصمیم گرفته ایم، این سوال پیش می آید: چگونه فرم را به JSON تبدیل کنیم؟ ما می‌توانیم آن را با دست تغییر دهیم، اما به سرعت پر زحمت و مستعد خطا می‌شود. دو روش با جاوا اسکریپت وانیلی استفاده از یک شی FormData برای بسته بندی فرم یا استفاده از روش Object.fromEntries() است. هر دو گزینه در فهرست ۳ نشان داده شده اند و نسخه زنده اینجا است. (توجه داشته باشید که از این پس من در واقع ارسال داده ها را نشان نمی دهم زیرا شما از قبل می دانید که چگونه این کار را انجام دهید. JSON مارشال شده را در بدنه درخواست قرار می دهیم.)

<form name="myform" action="https://echo.zuplo.io/" method="POST">
<input type="text" name="inputbox" value="" />
<input type="range" name="range" min"0" max="100">
<input type="color" name="color">
<input type="button" name="button" value="Click" onClick="testResults(this.form)" />
</form>

function testResults (form) {
  let inputValue = form.inputbox.value;
  let formData = new FormData(form);
  let object = {};
  formData.forEach(function(value, key){
    object[key] = value;
  });
  var json = JSON.stringify(object);
  alert(json);

  alert(JSON.stringify(Object.fromEntries(formData)));
}

ممکن است در فهرست ۳ متوجه شوید که من چند کنترل جدید – انتخابگر محدوده و رنگ – برای جالب‌تر کردن JSON اضافه کردم. اگر اکنون روی دکمه کلیک کنید، هشدارهایی با متنی مانند این دریافت خواهید کرد: {"inputbox":"Merry Christmas", "range":"50", "color":"#000000"} .

این رویکردها JSON معتبر را با کمترین سر و صدا ایجاد می‌کنند، اما با اشکال پیچیده‌تر با مشکل مواجه می‌شوند. به عنوان مثال، ورودی‌های چند انتخابی با Object.fromEntries شکسته می‌شوند و با استفاده از FormData نیاز به مدیریت اضافی دارند. برای بحث خوب درباره این مسائل به Stack Overflow مراجعه کنید.

همچنین ممکن است در بارگذاری فایل با مشکلاتی مواجه شوید. ورودی های فایل در واقع داده های باینری را در فیلد خود ارسال می کنند. همچنین می توان یک ورودی فایل چند انتخابی داشت که آرایه ای از تکه های باینری را ارسال می کند. به نحوه تبدیل آسان فرم HTML به JSON مراجعه کنید. برای توضیح خوبی از برخورد با این مشکل و موارد مشابه (مانند چندین فیلد با نام مشابه) هنگام ساخت دستی JSON از FormData.

.

تأیید اعتبار

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

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

می‌توانیم این نوع اعتبارسنجی را در چند مکان انجام دهیم. ما می‌توانیم این کار را زمانی انجام دهیم که کاربر فرم را ارسال می‌کند، یا زمانی که فیلد نام کاربری محو است (به این معنی که فوکوس خود را از دست می‌دهد)، یا حتی زمانی که کاربر تایپ می‌کند (برای این کار، از نوعی قطع یا جهش برای اطمینان از اینکه متلاطم نیست). فهرست ۴ و نسخه زنده کد در کمانچه به شما این حس را می دهد که چقدر ساده است اعتبار سنجی کار می کند.

// HTML
Enter something in the box: <br>
<input type="text" name="inputbox" id="inputBox" value="" />
<p id="msg"></p>

// JS
let inputBox = document.querySelector('#inputBox');
inputBox.addEventListener('input', (event) => {
  if (["frodo","bilbo","sam"].includes(event.target.value)){
    document.querySelector('#msg').innerHTML="Already have that Hobbit";
  } else {
    document.querySelector('#msg').innerHTML="";
  }
})

فهرست ۴ چند ایده جدید را معرفی می کند. اکنون یک عنصر پاراگراف با شناسه «msg» وجود دارد، که اگر کاربر نام کاربری موجود را انتخاب کند، از آن برای نمایش پیام خطا استفاده خواهیم کرد. در جاوا اسکریپت، یک شنونده را به صورت برنامه‌نویسی با استفاده از addEventListener به فیلد inputBox متصل می‌کنیم، در حالی که قبل از این به صورت توضیحی در HTML این کار را انجام می‌دادیم. با گوش دادن به رویداد ورودی، ما هر بار که کاربر تایپ می کند مطلع می شود (اگر از رویداد تغییر استفاده کرده باشیم، زمانی که کاربر با کلیک روی Enter تغییر را انجام دهد به ما اطلاع داده می شود). به جای ارسال مقدار ورودی (event.target.value) به سرور برای بررسی یک نام کاربری تکراری، می‌توانیم آن را در اینجا در برابر یک آرایه بررسی کنیم (در مورد ما، سه مورد داریم. نام هابیت قبلا ثبت شده است). اگر نام را از قبل در آرایه خود پیدا کنیم، با یافتن پاراگراف «msg» و تنظیم متن آن، یا پاک کردن پیام خطا در صورتی که نام تکراری نباشد، پیامی را در رابط کاربری تنظیم می‌کنیم. (دوباره، در عمل ما رویدادها را برای جلوگیری از لکنت در رابط کاربری به‌عنوان درخواست‌های رفت و برگشت به سرور کنترل می‌کنیم.)

Typeahead، پیشنهاد خودکار و تکمیل خودکار

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

فریم‌ورک‌ها و کتابخانه‌های جاوا اسکریپت در فرم‌ها

• جاوا اسکریپت
• توسعه وب< /a>
• توسعه نرم افزار< /a>