از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
اعتبارسنجی فرم سمت مشتری با استفاده از جاوا اسکریپت Vanilla امروزه اکثر برنامه های کاربردی وب از شما می خواهند که یک فرم را پر کنید، چه یک برنامه بانکی آنلاین یا یک سرویس پخش موسیقی. و از آنجایی که کاربران نهایی هرگز قابل اعتماد نیستند، باید برنامه خود را فریب دهیم تا تشخیص دهد که ورودی نادرست است…
سرفصلهای مطلب
معرفی
امروزه اکثر برنامه‌های کاربردی وب از شما می‌خواهند که یک فرم را پر کنید، چه یک برنامه بانکی آنلاین یا یک سرویس پخش موسیقی.
و از آنجایی که کاربران نهایی هرگز قابل اعتماد نیستند، باید برنامه خود را احمق کنیم تا زمانی که ورودی نادرست است تشخیص دهد و آن را با یک پیام (خطا) مناسب به کاربر برگرداند.
اعتبار سنجی فرم تکنیکی است که برای جلوگیری از ارائه داده هایی که نیازهای برنامه را برآورده نمی کند توسط کاربران استفاده می شود. به عنوان مثال مطمئن شوید که رمز عبور ارائه شده دارای حداقل یک کاراکتر بزرگ و یک عدد است. می توانید داده ها را تأیید کنید روی سمت سرور یا سمت سرویس گیرنده.
اعتبار سنجی سمت سرور ایده اعتبارسنجی داده های کاربر پس از ارسال به سرورها است. اگر داده ها در فرمت مورد انتظار نباشد، برای کاربر ارسال می شود.
از سوی دیگر، اعتبار سنجی سمت مشتری مستلزم اعتبارسنجی داده های ورودی توسط کاربر در مرورگر قبل از ارسال به سرور است. این معمولاً کارآمدتر از اعتبارسنجی سمت سرور است زیرا از رفت و برگشت مشتری به سرور و برگشت جلوگیری می کند. این همچنین یک فیلتر اولیه است که به جای برخورد با داده‌های نادرست پس از عبور، اطمینان حاصل می‌کند که داده‌های درست از آن عبور می‌کنند.
این بدان معنا نیست که سرور نباید اعتبارسنجی داده را داشته باشد – ما در ابتدا در حال بررسی هستیم.
در این آموزش، روش اعتبارسنجی داده ها در مرورگر با استفاده از وانیلی جاوا اسکریپت را مورد بحث قرار خواهیم داد.
ایجاد یک فرم
بیایید یک فرم ثبت نام ساده ایجاد کنیم که شامل فیلدهای زیر خواهد بود:
usernamefirst-password– برای بررسی رمز اولیه برای معیارهای خاص استفاده می شودsecond-password– به عنوان تأیید استفاده می شود و اطمینان حاصل می کند که کاربر اشتباه تایپی در آن انجام نداده استfirst-passwordرشته.
… و آن را در ما قرار دهید index.html فایل:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="validate.js"></script>
<title>Form Validation</title>
</head>
<body>
<h1>Form Validation Using JavaScript</h1>
<form id="form" action="/" method="GET">
<!-- We are only interested in client-side validation now -->
<!-- All the fields are required -->
<div>
<label for="username">Username: </label>
<input type="text" name="username" id="username" autofocus required />
</div>
<div>
<label for="first-password">Password: </label>
<input
type="password"
name="firstPassword"
id="first-password"
required
/>
</div>
<div>
<label for="second-password">Confirm Password: </label>
<input
type="password"
name="secondPassword"
id="second-password"
required
/>
</div>
<button type="submit">Submit</button>
</form>
<div id="show-error">No validation error yet!</div>
<!--We will use this div to display validation error -->
</body>
</html>
این فایل HTML یک فرم ساده را ارائه می دهد که به شکل زیر است:
فرم – الزامات
قبل از نوشتن هر کدی، اجازه دهید ابتدا لیست اعتبارسنجی هایی را که نیاز داریم مرور کنیم:
- اطمینان حاصل کنید که نام کاربری با یک حرف بزرگ شروع می شود
- نام کاربری باید حداقل دارای یک رقم باشد
- مطمئن شوید که طول رمز عبور بین 8 تا 20 کاراکتر باشد
- مطمئن شوید که رمز عبور حداقل یک حرف بزرگ داشته باشد
- مطابقت دو رمز عبور را تأیید کنید
در صورتی که ورودی کاربر با الزامات بالا مطابقت نداشته باشد، می خواهیم:
- متن آخرین
divعوض شدن - از ارسال فرم جلوگیری کنید
برپایی
ابتدا بیایید یک فایل اسکریپت بسازیم validate.js و آن را با ما پیوند دهید index.html فایل داخل ما head برچسب:
<script defer src="validate.js"></script>
سپس، اجازه دهید به فیلدهای مربوطه از سند دسترسی پیدا کنیم:
// To disable the form from submitting
const form = document.querySelector('#form');
// To display the error message
const errorDiv = document.querySelector('#show-error');
// To validate the username
const username = document.querySelector('#username');
// To validate the password
const firstPassword = document.querySelector('#first-password');
// To confirm the password
const secondPassword = document.querySelector('#second-password');
برای سادگی، اجازه دهید آن را طوری تنظیم کنیم که اعتبارسنجی فرم فقط با کلیک کردن روی submit دکمه، و نه در زمان واقعی:
form.addEventListener('submit', (error) => {
// All validation checks are run in this method.
}
پیاده سازی اعتبار سنجی ها
حرف اول نام کاربری بزرگ است
این کاملاً توضیحی است، اگر حرف اول رشته با نوع بزرگ آن یکسان باشد، به این معنی است که username در واقع با یک حرف بزرگ شروع می شود:
// We will include any and all errors in this string
let incorrectInput = '';
const firstLetter = username.value(0);
// Return true if first letter is uppercase
const firstLetterIsUpperCase = (firstLetter === firstLetter.toUpperCase());
if (!firstLetterIsUpperCase) {
incorrectInput += ' The first letter of username must be uppercase.\n';
}
نام کاربری حداقل شامل یک رقم است
/\d/ یک الگوی عبارت منظم است که با یک رقم منطبق است، به این معنی که اگر حتی یک بار با نام کاربری ارائه شده مطابقت داشته باشد، نام کاربری حاوی یک رقم است:
// Regex to see if a digit is in the username, returns true if there is
const usernameIncludesDigit = /\d/.test(username.value);
if (!usernameIncludesDigit) {
incorrectInput += 'Username must include at least one digit.\n';
}
رمز عبور بین 8 تا 20 کاراکتر است
را length ویژگی string باید تعداد کاراکترهای رمز عبور را به ما بدهد. یک دستور شرطی ساده باید این کار را انجام دهد:
const badPasswordLength = (firstPassword.value.length < 8 || firstPassword.value.length > 20);
if (badPasswordLength) {
incorrectInput += ' The password should be within 8 to 20 characters.\n';
}
رمز عبور حداقل شامل یک نویسه بزرگ است
این شبیه کاری است که ما برای نام کاربری انجام دادیم. فقط باید عبارت منظم را تغییر دهیم تا به جای اعداد، حروف بزرگ را بررسی کنیم:
// Regex to see if a digit is in the username, returns true if there is
const passwordIncludesUppercase = /(a-z)/.test(firstPassword.value);
if (!passwordIncludesUppercase) {
incorrectInput += ' The password should contain at least one uppercase character.\n';
}
بررسی کنید که دو رمز عبور یکسان هستند
در نهایت باید مقایسه کنیم firstPassword به secondPassword برای دیدن اینکه آیا مطابقت دارند یا خیر:
if (firstPassword.value !== secondPassword.value) {
incorrectInput += 'The passwords do not match.\n';
}
نمایش پیام های خطا
پس از تمام این بررسی ها، اگر هر شرطی برآورده نشد، incorrectInput یک رشته خالی نخواهد بود و حاوی مسئله مطرح شده در آن بلوک شرطی است.
در این صورت، متن را در تغییر می دهیم errorDiv برای نشان دادن خطاهایمان با رنگ قرمز:
if (incorrectInput !== "") {
// Change the error div tag to display the error message(s)
errorDiv.innerText = incorrectInput;
// Change the color of the text to red
errorDiv.style.color = 'red';
// Prevent the form button from submitting again, before fixing the issues
error.preventDefault();
}
تست کد
و اکنون، بیایید فرم جدید خود را با ورودی زیر آزمایش کنیم:
- نام کاربری:
johndoe - کلمه عبور:
42 - تایید رمز عبور:
421
که باید نتایج زیر را به همراه داشته باشد:
.jpg "اعتبارسنجی فرم سمت مشتری با استفاده از جاوا اسکریپت Vanilla امروزه اکثر برنامه های کاربردی وب از شما می خواهند که یک فرم را پر کنید، چه یک برنامه بانکی آنلاین یا یک سرویس پخش موسیقی. و از آنجایی که کاربران نهایی هرگز قابل اعتماد نیستند، باید برنامه خود را فریب دهیم تا تشخیص دهد که ورودی نادرست است... 2")
نتیجه
در این مقاله از وانیلی جاوا اسکریپت برای تایید یک فرم ساده HTML استفاده کردیم.
جاوا اسکریپت ما را قادر می سازد تا بررسی های اعتبار سنجی سفارشی را متناسب با مورد استفاده خود تعریف کنیم. به عنوان مثال، می توانید الگوهای سفارشی را اضافه کنید که یک رمز عبور باید مطابق با آنها باشد تا کاربر بتواند ثبت نام کند روی وبسایت شما.
منتشر شده در 1403-01-17 15:03:04
