آموزش اعتبارسنجی حرفه‌ای فُرم های HTML + ریجکس شماره تلفن

پیش نیازها

1. آشنایی ابتدایی با HTML
2. آشنایی با JavaScript در صورت نیاز

اعتبارسنجی فرم احرازهویت

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

<form>
    <label for="phone">شماره تلفن</label>
    <input type="text" pattern="^(09\d{9}|989\d{9})$" required id="phone" name="phone" />
</form>

<form>
    ...
    <label for="password">رمزعبور</label>
    <input type="password" pattern="^[A-Za-z0-9]{4,20}$" required id="password" name="password" />
    <label for="confirmPassword">تکرار رمزعبور</label>
    <input type="password" pattern="^[A-Za-z0-9]{4,20}$" required id="confirmPassword" name="confirmPassword" />
</form>

<form>
    ...
    <label for="username">نام کاربری</label>
    <input type="text" pattern="^[A-Za-z0-9]{4,20}$" required id="username" name="username" />
</form>

تغییر پیام خطای پیش‌فرض مرورگر

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

const phoneInput = document.getElementById("phone")
phoneInput.addEventListener("input",()=>{
	const regex = /^(09\d{9}|989\d{9})$/;
	if (!regex.test(phoneInput.value)) {
		phoneInput.setCustomValidity("شماره تلفن باید از اعداد لاتین باشد و با 09 یا 989 شروع شود");
	} else {
		phoneInput.setCustomValidity(""); // اگر شماره صحیح بود پیام خطا را پاک کنید
	}
})

اعتبارسنجی پایانی و ارسال فُرم

اعتبارسنجی ما در HTML به پایان رسیده است و اکنون قصد داریم با استفاده از جاوااسکریپت، اعتبارسنجی را به سطحی بالاتر و کامل‌تر ارتقا دهیم.

const password = document.getElementById("password");
const confirmPassword = document.getElementById("confirmPassword");
const myForm = document.querySelector("form");

myForm.addEventListener("submit",async (event)=>{
	event.preventDefault();

	if (password.value === confirmPassword.value) {
		const formData = new FormData(myForm);
		const response = await fetch("SERVER_ENDPOINT", {
			method: "POST",
			body: formData,
		});
		if (response.ok){
			const result = await response.json();
			alert(result)
		}else alert("مشکلی رخ داده، لطفا مجددا تلاش کنید")
	}else{
		alert("رمزعبور با تکرار آن مطابقت ندارند")
	}
})

توضیحات کد بالا

event.preventDefault : از رفرش شدن صفحه جلوگیری می‌کند و ما می‌توانیم اعتبارسنجی را انجام دهیم.

سپس در شرط چک می‌کنیم که اگر دو رمزعبور با یکدیگر مطابقت نداشتند یک پیام تذکر به کاربر نمایش داده شود.

و در آخر فُرم را به سرور ارسال می‌کنیم و پاسخ را به کاربر نمایش می‌دهیم.

نتیجه گیری

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

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