آموزش جاوا اسکریپت

آموزش اعتبارسنجی فرم ها در جاوااسکریپت

مقدمه

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

ما برای ساخت فرم ها و استایل دهی اونا از فریم ورک Bootstrap استفاده کردیم.

شما میتونید از هر فریم ورکی که میخواید استفاده کنید، یا با CSS بهش استایل بدید.

ساختار فرم ها در html

توی هر فرم تعدادی تگ input هست که توسط اونها میتونید مقادیری مثل متن، عدد، ایمیل یا فایل از کاربر بخواید.

همینطور میتونید برای کاربر checkbox یا radiobox قرار بدید که بتونه بین چند مورد، یک یا بیشترش رو انتخاب کنه.

همینطور از تگ های دیگه مثل p, label, small, div و… هم میشه توی فرم ها استفاده کرد.

تگ های اینپوت میتونن اتریبیوت های مختلفی داشته باشن که بعضیاشون مختص به نوعشون هست.

یکی از اتریبیوت هایی که تقریبا همه ی ورودی هامون دارن، placeholder هست.

وقتی که کاربر مقداری توی اون فیلد وارد نکرده باشه، متنی که توی placeholder نوشتیم نمایش داده میشه.

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

هر فرم یه اتریبیوت(Attribute) به نام اکشن(action) داره که یک آدرس میگیره.

وقتی که فرم ثبت میشه، اطلاعات فرم برای پردازش به اون صفحه ارسال میشن.(البته ما توی این آموزش کاری به پردازش فرم نداریم)

برای ثبت فرم ورودی، باید با استفاده از تگ  button، دکمه ای توی فرم ایجاد کنیم و بهش اتریبیوت type=”submit” بدیم.

برای خالی کردن مقادیر ورودی هامون میتونیم یک دکمه ایجاد کنیم و بهش type=”reset” بدیم.

ضروری بودن (Required) المنت ورودی

وقتی توی فرم یک ورودی رو Required میکنیم، موقع ثبت فرم اون ورودی باید پر شده باشه.

به دو روش میشه این کار رو انجام داد که در زیر کامل توضیحشون میدیم.

اتریبیوت Required:

این کار رو میتونیم با اتریبیوت Required انجام بدیم.

مثال:

<input type="email" required />

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

فانکشن setCustomValidity() در جاوااسکریپت

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

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

پس از فانکشن getElementById() استفاده میکنیم.

مزیتی که این روش نسبت به روش قبل داره اینه که میتونیم پیغام دلخواه به کاربر نشون بدیم.

const inputName = document.getElementById("input-name");

حالا برای ست کردن اعتبارسنجی دلخواه، از فانکشن setCustomValidity() استفاده میکنیم.

inputName.setCustomValidity("نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید");

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

برای این کار از فانکشن addEventListener() استفاده میکنیم که سینتکسش به شکل زیره:

inputName.addEventListener("input", function() {
    if (inputName.value == "") {
        inputName.setCustomValidity("نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید");
    } else {
        inputName.setCustomValidity("");
    }
});	

اعتبارسنجی(Validate کردن) ورودی ها با RegEx

رگ اکس (Regular Expression یا Regex یا RegExp) ها ، یه سری الگو برای جستجو توی رشته ها هستن.

برای اطلاعات بیشتر در موردشون میتونید اینجا کلیک کنید.

با این الگو ها، میتونیم رشته و الگومون رو مقایسه کنیم و ببینیم که با هم همخوانی دارن یا نه.

برای نوشتن این الگو ها و تستشون به صورت انلاین و دیدن نتایج، میتونید به این سایت برید.

اعتبارسنجی ایمیل با RegEx

حالا ما میخوایم یه رگ اکس برای اعتبارسنجی ایمیل بنویسیم.

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

قوانین گوگل برای یوزرنیم:

  • یوزرنیم باید بین 6 تا 30 کاراکتر بلندی داشته باشه.
  • یوزرنیم ها میتونن حاوی حروف و اعداد انگلیسی و نقطه “.” بشن.
  • یوزرنیم ها نمیتونن شامل کاراکتر های اضافی یا بیشتر از یک نقطه پشت سر هم باشن.
  • یوزرنیم ها فقط میتونن با حروف انگلیسی شروع بشن.
  • یوزرنیم ها فقط میتونن با اعداد یا حروف انگلیسی به اتمام برسن.

رگ اکس برای اعتبارسنجی ایمیل

ایمیل شامل سه قسمت میشه، یوزرنیم، دامین و اکستنشن

username@domain.extension

پس رگ اکسمون سه تا قسمت داره، پس سه تا پرانتز ایجاد میکنیم.

()()()

بین یوزرنیم و دامین، یه “@” و بین دامین و اکستنشن هم “.” وجود داره.

ولی در رگ اکس، “.” معنی ” هر کاراکتر ” رو داره.

برای استفاده از کاراکتر . توی رگ اکس باید یه بک اسلش پشتش بذاریم.

()@()\.()

علامت “^” مشخص میکنه که رشته باید با چه عبارت یا کاراکتر هایی شروع بشه.

علامت “$” هم همینکارو برای پایان رشته میکنه.

^()@()\.()$

حالا میخوایم مشخص کنیم که بخش اول، فقط با حروف انگلیسی شروع بشن.

برای اینکار باید یه مجموعه از کاراکتر هارو سلکت کنیم که این کارو با براکت “[ ]” انجام میدیم.

توجه داشته باشید که حروف بزرگ یا کوچیک منعی ندارن، پس جفتشون رو توی رگ اکسمون مینویسیم.

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

علامت “+” در رگ اکس معنی “حداقل یکی، و یا بیشتر” رو داره. ولی در اینجا ما ازش استفاده نمیکنیم. چون شروعمون با یک حرف شروع میشه و بیشتر از اون ضرورتی نداره.

^([a-zA-Z])@()\.()$

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

برای اینکار یه پرانتز دیگه باز میکنیم. اینجا از علامت سوال “؟” استفاده شده که معنیش توی رگ اکس اینه که فقط یکی از اون کاراکتر رو قبول میکنه و ضروری هم نیست.

^([a-zA-Z](\.?))@()\.()$

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

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

^([a-zA-Z](\.?[a-zA-Z0-9])*)@()\.()$

علامت “*” در رگ اکس، مخلوطی از “؟” و “+” هست، یعنی ضروری نیست و به هر تعدادی میتونه تکرار بشه.

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

^([a-zA-Z](\.?[a-zA-Z0-9])*)@([a-zA-Z](\.?[a-zA-Z0-9])*)\.()$

و اما قسمت اکستنشن، یا همون قسمت آخر. فقط حروف انگلیسی میپذیریم. به نظر ساده میاد.

^([a-zA-Z](\.?[a-zA-Z0-9])*)@([a-zA-Z](\.?[a-zA-Z0-9])*)\.([a-zA-Z])$

تو قدم آخر هم با آکولاد، حداقل تعداد کاراکتر بخش هامون رو مشخص کنیم که به ترتیب 6، 3 و 2 هست.

برای دامین و یوزرنیم، شروعمون با حروفه، پس از حداقل هامون یکی کم میکنیم و جلوی بخش دوم مینویسیم.

^([a-zA-Z](\.?[a-zA-Z0-9]{5,})*)@([a-zA-Z](\.?[a-zA-Z0-9]{2,})*)\.([a-zA-Z]{2,})$

این الگو رو به دو روش زیر میتونیم روی رشتمون، یا همون ورودیمون اعمال کنیم.

روش های اعتبارسنجی ورودی با RegEx

اتریبیوت pattern

ساده ترین راه برای اعتبارسنجی رگ اکس مقادیر فرم ورودی، دادن اتریبیوت الگو (pattern) به المنتمون تو اچ تی ام ال هست.

برای مثال یه اینپوت با تایپ ایمیل میسازیم و با اتریبیوت pattern الگو رو روی اون اعمال میکنیم.

<input type = "email" pattern = "^([a-zA-Z]+(\.?[a-zA-Z0-9] {5,})*)@([a-zA-Z]+(\.?[a-zA-Z0-9] {2,})*)\.([a-zA-Z] {2,})$" />

استفاده از فانکشن setCustomValidity و test

حالا که 2 تا ورودی داریم، بهتره یذره نظم به کدمون بدیم.

یه فانکشن برای ولیدیت کردن میسازیم، و برای هر ورودی، یه آبجکت میسازیم تا کدمون تمیز تر بشه.

const inputName = {
    element: document.getElementById("input-name"),
    error_empty: "نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید",
    pattern: ""
}

validate(inputName);

function validate(input) {
    input.element.setCustomValidity(input.error_empty);
    input.element.addEventListener("input", function() {
        if (input.value == "") {
            input.element.setCustomValidity(input.error_empty);
        } else {
            input.element.setCustomValidity("");
        }

    });

}

ورودی فانکشن همون آبجکتیه که برای هر فیلد ورودی درست میکنیم که شامل المنت، پترن و ارور هامونه.

حالا آبجکت ایمیلمون رو درست کنیم و چندتا شرط به فانکشنمون اضافه می کنیم و در آخرم با فانکشن test  ورودیمون رو اعتبارسنجی کنیم.

const inputName = {
    element: document.getElementById("input-name"),
    error_empty: "نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید",
    pattern: ""
}
const inputEmail = {
    element: document.getElementById("input-email"),
    error_empty: "ایمیل نمیتونه خالی باشه، لطفا ایمیلتون رو وارد کنید",
    error_pattern: "لطفا ایمیل معتبر وارد کنید",
    pattern: /^([a-zA-Z](\.?[a-zA-Z0-9]{5,})*)@([a-zA-Z]+(\.?[a-zA-Z0-9]{3,}))\.([a-zA-Z]{2,})$/
}

validate(inputName);
validate(inputEmail);

function validate(input) {
    input.element.setCustomValidity(input.error_empty);
    input.element.addEventListener("input", function() {
        if (input.value == "") {
            input.element.setCustomValidity(input.error_empty);
        } else if (input.pattern == undefinded) {
            input.element.setCustomValidity("");
        } else if (input.pattern.test(input.element.value)) {
            input.element.setCustomValidity("");
        } else {
            input.element.setCustomValidity(input.error_pattern);
        }
    });
}

توی شرط فانکشنمون، نوشتیم که بررسی کنه که آیا مقداری توی ورودیمون هست یا نه.

اگه نبود، ارور خالی بودن رو با فانکشن setCustomValidity به ورودیمون میدیم.

اگه خالی نبود و ورودیمون پترن نداشت، ارور رو از روی ورودیمون برمیداریم.

اگه ورودیمون پترن داشت، با فانکشن RegExp.test، مقداری که توی ورودیمون هست رو اعتبارسنجی میکنیم.

این فانکشن یه رشته میگیره و مقدار بولین(صحیح یا غلط) برمیگردونه. اگه رشتمون با اون الگو مطابقت داشت، صحیح (true) بر میگردونه و اگه نداشته باشه، غلط(false) برمیگردونه.

از این مقدار میتونیم بدون نیاز به علامت های شرط، مثل “==” یا “=!” و… در شرط هامون استفاده کنیم.

اگه فانکشن test مقدار صحیح برگردونه، ارور از روی ورودی برداشته میشه. اگه خالی باشه، ارور مغایرت داشتن با الگو برای کاربر به نمایش در میاد.

اعتبارسنجی شماره موبایل با RegEx

با تگ اینپوت یه ورودی با تایپ تکست میسازیم و ایدی بهش میدیم.

مثل نام و ایمیل یه آبجکت براش توی محیط جاوااسکریپت تعریف میکنیم.

شماره موبایل، با 09 شروع میشه و غیر از اون 9 عدد طول داره.

پس رشته باید با 09 شروع بشه و . پس رگ اکس شماره موبایل رو اینطوری مینویسیم:

^(09[0-9]{9})$

برای نظم بیشتر یه آرایه تعریف کردیم برای آبجکت هامون، و با حلقه foreach، مقدایر داخلش رو به متد ولیدیت پاس میدیم.

const input = [
    name = {
        element: document.getElementById("input-name"),
        error_empty: "نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید",
        pattern: ""
    },
    email = {
        element: document.getElementById("input-email"),
        error_empty: "ایمیل نمیتونه خالی باشه، لطفا ایمیلتون رو وارد کنید",
        error_pattern: "لطفا ایمیل معتبر وارد کنید",
        pattern: /^([a-zA-Z](\.?[a-zA-Z0-9]{5,})*)@([a-zA-Z]+(\.?[a-zA-Z0-9]{3,}))\.([a-zA-Z]{2,})$/
    },
    phone = {
        element: document.getElementById("input-phone"),
        error_empty: "شماره همراه نمیتونه خالی باشه، لطفا شمارتون رو وارد کنید",
        error_pattern: "لطفا شماره همراه معتبر وارد کنید",
        pattern: /^(09[0-9]{9})$/
    }

];
input.forEach(element => {
    validate(element);
});

رادیو باتن جنسیت و نامبر سن در جاوااسکریپت

تو این قسمت میخوایم توی فرم با استفاده از اینپوت تایپ رادیو(radio) یه انتخاب دو گزینه ای برای جنسیت بذاریم.

بعد با استفاده از اینپوت تایپ نامبر یه ورودی عددی برای سن می ذاریم.

و میگیم اگه جنسیت مرد رو انتخاب کرده بود و سن هم بالای 18 بود، یه بخش دراپ داون سلکت برای وضعیت نظام وظیفه ظاهر بشه.

برای اینکار رادیو باتن ها، سلکت نظام وظیفه و اینپوت نامبر رو در فایل Htmlمون مینویسیم.

برای اینکه توی محیط جاوااسکریپت بهشون دسترسی داشته باشیم و بتونیم تغییرشون بدیم، بهشون ایدی میدیم.

برای مثال به تگ سلکت سن ایدی select-age رو میدیم.

این ایدی هارو هر طور که میخواید بذارید، ولی یجوری نام گذاریشون کنید که توی فضای جاوااسکریپت بتونید بدون مشکل بهشون دسترسی داشته باشید.

ما تگ divی که سلکتمون توش هست رو بهش ایدی div-select-ms دادیم.

توی آرایه ای که برای آبجکت های اینپوت ها ایجاد کرده بودیم، سن رو هم اضافه میکنیم تا اون رو هم Required کنیم.

const input = [
    name = {
        element: document.getElementById("input-name"),
        error_empty: "نام نمیتونه خالی باشه، لطفا نامتون رو وارد کنید",
        pattern: ""
    },
    email = {
        element: document.getElementById("input-email"),
        error_empty: "ایمیل نمیتونه خالی باشه، لطفا ایمیلتون رو وارد کنید",
        error_pattern: "لطفا ایمیل معتبر وارد کنید",
        pattern: /^([a-zA-Z](\.?[a-zA-Z0-9]{5,})*)@([a-zA-Z]+(\.?[a-zA-Z0-9]{3,}))\.([a-zA-Z]{2,})$/
    },
    phone = {
        element: document.getElementById("input-phone"),
        error_empty: "شماره همراه نمیتونه خالی باشه، لطفا شمارتون رو وارد کنید",
        error_pattern: "لطفا شماره همراه معتبر وارد کنید",
        pattern: /^(09[0-9]{9})$/
    },
    age = {
        element: document.getElementById("age"),
        error_empty: "سن نمیتونه خالی باشه، لطفا سنتون رو وارد کنید",
        pattern: ""
    }
];

رادیو باتنی که برای جنسیت مرد مشخص کرده بودیم رو بهش ایدی gender-radio1 دادیم تا بتونیم چک کنیم که انتخاب شده یا نه.

یه فانکشن به اسم militaryServ تعریف کردیم.

توش با استفاده از کلمه کلیدی let، دوتا متغیر تعریف میکنیم که فقط توی فانکشن تعریف شدن.

و توسط فانکشن getElementById تبدیلشون میکنیم به آبجکت هایی برای المنت هایی که نیاز به دسترسی بهشون رو داریم.

یعنی divی که سلکت سربازی توش هست؛ و رادیو باتن “مرد”. نیاز به سن هم داریم، ولی از قبل توی آرایمون تعریفش کردیم.

حالا نیاز به یه ایف داریم که چک کنه رادیو باتن “مرد” انتخاب شده یا نه و سن هم باید بالای 18 باشه.

برای چند شرطی کردن یک ایف، یا همون “و” اوردن بین دو شرط، باید از “&&” استفاده کنیم. مثال زیر رو ببینید:

var x = 20;
var y = 10;
if(x > 15 &amp;&amp; y < 10){
    console.log(x,y);
}

در اینجا شرط گذاشتیم که اگر ایکس بزرگتر از 15 بود و و ای کوچیک تر از 10، توی کنسول مقادیر ایکس و وای رو چاپ کن.

ایکس بزرگتر از 15 هست، ولی وای کوچک تر از 10 نیست، پس چیزی توی کنسول چاپ نمیشه.

توی فایل سی اس اسمون، دیسپلی div-select-ms رو مساوی با none میکنیم. حالا توی فانکشنمون شرط رو به این صورت تعریف میکنیم:

function militaryServ() {
    let divselect = document.getElementById("div-select-ms");
    let male = document.getElementById("gender-radio1");
    if (male.checked &amp;&amp; age.element.value >= 18) {

        divselect.style.display = "inline-block";
    } else {
        divselect.style.display = "none";
    }
}

اگه “مرد” انتخاب شده بود و مقداری که توی سن هست بزرگتر یا برابر 18 بود، دیسپلی div رو برابر با inline-block کنه؛

و اگه هر کدوم از این شرطا اجرا نشد، دیسپلی رو برابر با none کنه.

به divی که رادیو گروپمون توشه اتریبیوت آن چنج (onchange) میدیم و توش فانکشن militaryServ رو مینویسیم که زمانی که چیزی توی رادیو گروپ تغییر کرد، فانکشنمون فراخوانی بشه.

<div onchange="militaryServ()" >

ما نیاز داریم که اگه توی سنمون هم تغییر ایجاد شد، فانکشن فراخوانی بشه.

پس به ورودی عددی سن، اتریبیوت oninput=”militaryServ()” میدیم.

حالا زمانی که توی رادیو گروپ یا سنمون تغییری ایجاد بشه، فانکشنمون فراخوانی میشه. حالا میخوایم یه محدوده ای برای سن در نظر بگیریم، مثلا از 3 تا 120.

برای اینکار میتونیم از اتریبیوت max و min استفاده کنیم ولی چون میخوایم ارور دلخواه به کاربر نمایش بدیم، از setCustomValidity استفاده میکنیم.

اول از همه باید 2 تا پراپرتی به آبجکت سنمون اضافه کنیم. یکیش اروریه که موقعی که کاربر عددی خارج از محدوده وارد کرد نشون میده.

دوم هم خود اون محدوده هست که به صورت یک پراپرتی تو در تو تعریف میکنیم تا دسترسیمون بهش راحت باشه.

age = {
        element: document.getElementById("age"),
        error_empty: "سن نمیتونه خالی باشه، لطفا سنتون رو وارد کنید",
        error_range: "لطفا سن بین 3 تا 120 سال وارد کنید",

        range: {
            min: 3,
            max: 120
        }
    }

حالا به شرط های فانکشن ولیدیت، یه شرط اضافه میکنیم، که چک کنه input.range تعریف شده یا نه.

اگه تعریف نشده بود میره سراغ چک کردن پترن و اگه تعریف شده بود مینیموم و مکسیموم رو با مقدار توی ورودیمون چک میکنه و ارور مناسب رو به کاربر نمایش میده.

function validate(input) {
    input.element.setCustomValidity(input.error_empty);
    input.element.addEventListener("input", function() {
        if (input.value == "") {
            input.element.setCustomValidity(input.error_empty);
        } else if (input.range != undefined) {
            if (input.range.min <= input.element.value &amp;&amp; input.range.max >= input.element.value) {
                input.element.setCustomValidity("");
            } else {
                input.element.setCustomValidity(input.error_range);
            }
        } else if (input.pattern == undefined) {
            input.element.setCustomValidity("");
        } else if (input.pattern.test(input.element.value)) {
            input.element.setCustomValidity("");
        } else {
            input.element.setCustomValidity(input.error_pattern);
        }
    });
}

اینجا با “&&” چک کردیم که مقدارمون بین input.range.min و input.range.max هست یا نه.

اگه بود، ارور اعتبارسنجی رو خالی میکنه، و اگه نبود، اروری که توی آبجکتمون وارد کردیم رو نمایش میده.

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

برای ساخت فیلد آپلود در فرم باید یه اینپوت با تایپ file بسازیم.

در ادامه هم نحوه اعتبارسنجی فرمت و حجمش در جاوااسکریپت رو یاد میگیریم.

اول از همه، به ورودی فایلمون اتریبیوت accept میدیم تا فرمت هایی رو که میخوایم رو توی قسمت انتخاب فایل به کاربر نشون بده.

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

مثل doc, docx, pdf, odf و اونارو توی اتریبیوت اکسپت به این شکل مینویسیم:

accept=".docx, .doc, .pdf, .odf"

ولی این نمیتونه جلوی کاربر رو بگیره که فایلی غیر از این فرمت ها وارد نکنه. برای همین از setCustomValidity استفاده میکنیم.

توی ورودیمون فایل میتونیم با استفاده از اتریبیوت oninput، فانکشنی که در ادامه مینویسیم رو فراخوانی کنیم و بهش مقدار this رو پاس بدیم.

اینجا this به معنی همون المنتیه که توش اینو نوشتیم، یعنی همون ورودی فایل. اینجوری دیگه نیاز نیست از متد getElementById استفاده کنیم.

<input type="file" name="myfile" oninput="filevalidation(this)" accept=".doc, .docx, .pdf, .odf" />

حالا متد filevalidation رو مینویسیم. اول، با فانکشن setCustomValidity ارور خالی بودن روی ورودیمون میذاریم.

بعد فانکشن رو یبار بیرون از فانکشن فراخوانی میکنیم تا زمانی که صفحه لود میشه فانکشن هم یکبار اجرا بشه.

حالا چک میکنیم که کاربر فایلی رو انتخاب کرده یا نه. این کار رو توسط طول آرایه ی فایل های انتخاب شده انجام میدیم.

function filevalidation(file) {
        file.setCustomValidity("لطفا فایل رزومه را انتخاب کنید");
    if (file.files.length >= 1) {
    }
}

حالا، یه ثابت برای حجم فایلمون به مگابایت تعریف میکنیم.

اگه تفاوت متغیر ها، ثابت ها و چگونگی تعریفشون رو نمیدونید حتما به این مقاله یه سر بزنید. حجمی که files[x].size بهمون میده به بایت هست.

برای اینکه تبدیل به مگابایتش کنیم اون رو تقسیم بر 1048576 میکنیم. عدد رو ضربدر 100 میکنیم. این کار باعث میشه که 2 رقم اعشار برامون بمونه و بتونیم به کاربر نمایشش بدیم.

حالا با فانکشن round از اینترفیس Math عدد رو رند میکنیم. حالا تقسیم بر 100 میکنیم تا اعشار حفظ بشه.

const mbsize = Math.round((100 * (file.files[0].size / 1048576))) / 100;

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

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

قسمت دوم هم قسمت فرمته که باید یکی از فرمت های انتخابی ما باشه.

(.+)(\.)$

حالا چطوری “یا” رو توی رگ اکس تعریف کنیم؟ برای اینکار باید از کاراکتر “|” استفاده کنیم.

(.+)(\.(pdf)|(docx)|(doc)|(odf))$

حالا یه شرط ایف میذاریم، اگه سایز فایلمون کوچکتر از 5 مگابایت بود و پترنمون هم رعایت شده بود، با ست کاستوم ولیدیتی، اروری که روش بوده رو برمیداریم.

اگه یکی از شرط ها یا هردو شرط برقرار نبودند، اروری به کاربر نمایش داده میشه که فرمت های پذیرفته شده و لیمیت حجم رو نمایش میده.

اگه شرط اولمون که بیشتر بودن طول آرایه files از 0 بود اجرا نشد، به کاربر ارور خالی بودن رو نشون میدیم.

function filevalidation(file) {

    file.setCustomValidity("لطفا فایل رزومه را انتخاب کنید");
    if (file.files.length >= 1) {
        
        const mbsize = Math.round((100 * (file.files[0].size / 1048576))) / 100;
            
        if (filePattern.test(file.files[0].name) &amp;&amp; mbsize < 5) {
            button.setCustomValidity("");
        } else {
            button.setCustomValidity("حجم فایل باید از 5 مگابایت کمتر باشه، فقط فرمت های doc, docx, pdf و odf پذیرفته هستن");

        }
    } else {
        inputCv.setCustomValidity("لطفا فایل رزومه را انتخاب کنید");
    }
}

چک باکس برای قوانین

برای ضرروی کردن چک باکس ها در فرم باید از اتریبیوت checked که یه مقدار بولین هست استفاده کنیم.

بعد همونطور که در قسمت های قبل گفته شد با فانکشن setCustomValidity اون رو به یه مقدار ضروری تبدیل کنیم.

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن