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

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

فرم های وب به بخشی ضروری از برنامه های کاربردی وب تبدیل شده اند. اغلب برای جمع آوری اطلاعات کاربر مانند نام، آدرس ایمیل، مکان، سن و …استفاده می شود.اما ممکن است برخی از کاربران داده‌هایی را که انتظار دارید را وارد نکنند.بنابراین برای صرفه جویی در پهنای باند و جلوگیری از فشار غیرضروری بر منابع سرور خود، می توانید داده های فرم را در سمت کلاینت (یعنی سیستم کاربر) با استفاده از جاوا اسکریپت قبل از ارسال آن به وب سرور برای پردازش بیشتر تأیید کنید.

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

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

توجه: اعتبار سنجی سمت کلاینت جایگزین یا جایگزینی برای اعتبار سنجی سمت سرور نیست. شما همیشه باید داده های فرم را در سمت سرور تأیید کنید. حتی اگر قبلاً در سمت سرویس گیرنده تأیید شده باشند، زیرا کاربر می تواند جاوا اسکریپت را در مرورگر خود غیرفعال کند.

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

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

خوب، بیایید مستقیماً به آن بپردازیم و ببینیم که این واقعاً چگونه کار می کند.

ایجاد فرم HTML

اجازه دهید ابتدا یک فرم ساده HTML ایجاد کنیم که وقتی کاربر روی دکمه ارسال کلیک می‌کند، در سمت کلاینت با استفاده از جاوا اسکریپت اعتبارسنجی می‌کنیم. خوب، بیایید یک فایل HTML با نام “application-form.html” ایجاد کنیم و کد زیر را در آن قرار دهیم، سپس آن را در جایی از سیستم خود ذخیره کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple HTML Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php" method="post">
    <h2>Application Form</h2>
    <div class="row">
        <label>Full Name</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="row">
        <label>Email Address</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="row">
        <label>Mobile Number</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="row">
        <label>Country</label>
        <select name="country">
            <option>Select</option>
            <option>Australia</option>
            <option>India</option>
            <option>United States</option>
            <option>United Kingdom</option>
        </select> 
        <div class="error" id="countryErr"></div>
    </div>
    <div class="row">
        <label>Gender</label>
        <div class="form-inline">
            <label><input type="radio" name="gender" value="male"> Male</label>
            <label><input type="radio" name="gender" value="female"> Female</label> 
        </div>
        <div class="error" id="genderErr"></div>
    </div>
    <div class="row">
        <label>Hobbies <i>(Optional)</i></label>
        <div class="form-inline">
            <label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>
            <label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>
            <label><input type="checkbox" name="hobbies[]" value="music"> Music</label>  
        </div>
    </div>        
    <div class="row">
        <input type="submit" value="Submit">
    </div>
</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple HTML Form</title>

</head>

<body>

<h2>Application Form</h2>

</div>

<label>Email Address</label>

</div>

<label>Mobile Number</label>

</div>

<label>Country</label>

<option>Select</option>

<option>Australia</option>

<option>India</option>

<option>United States</option>

<option>United Kingdom</option>

</select>

</div>

<label>Gender</label>

<label><input type="radio" name="gender" value="female"> Female</label>

</div>

</div>

<label>Hobbies <i>(Optional)</i></label>

<label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>

<label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>

<label><input type="checkbox" name="hobbies[]" value="music"> Music</label>

</div>

</div>

</form>

</body>

</html>

ساخت اسکریپت اعتبار سنجی فرم

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

خوب، بیایید یک فایل جاوا اسکریپت به نام “validator.js” بسازیم و کد زیر را داخل آن قرار دهیم. سپس آن را در همان مکانی که فایل HTML قبلی را ذخیره کرده بودید، ذخیره کنید. برای درک نحوه عملکرد اعتبارسنجی جاوا اسکریپت، هر خط از کد مثال زیر را مرور کنید:

// Defining a function to display error message
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

// Defining a function to validate form 
function validateForm() {
    // Retrieving the values of form elements 
    var name = document.contactForm.name.value;
    var email = document.contactForm.email.value;
    var mobile = document.contactForm.mobile.value;
    var country = document.contactForm.country.value;
    var gender = document.contactForm.gender.value;
    var hobbies = [];
    var checkboxes = document.getElementsByName("hobbies[]");
    for(var i=0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            // Populate hobbies array with selected values
            hobbies.push(checkboxes[i].value);
        }
    }
    
	// Defining error variables with a default value
    var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
    
    // Validate name
    if(name == "") {
        printError("nameErr", "Please enter your name");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Please enter a valid name");
        } else {
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    // Validate email address
    if(email == "") {
        printError("emailErr", "Please enter your email address");
    } else {
        // Regular expression for basic email validation
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Please enter a valid email address");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Validate mobile number
    if(mobile == "") {
        printError("mobileErr", "Please enter your mobile number");
    } else {
        var regex = /^[1-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Please enter a valid 10 digit mobile number");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
        }
    }
    
    // Validate country
    if(country == "Select") {
        printError("countryErr", "Please select your country");
    } else {
        printError("countryErr", "");
        countryErr = false;
    }
    
    // Validate gender
    if(gender == "") {
        printError("genderErr", "Please select your gender");
    } else {
        printError("genderErr", "");
        genderErr = false;
    }
    
    // Prevent the form from being submitted if there are any errors
    if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
       return false;
    } else {
        // Creating a string from input data for preview
        var dataPreview = "You've entered the following details: \n" +
                          "Full Name: " + name + "\n" +
                          "Email Address: " + email + "\n" +
                          "Mobile Number: " + mobile + "\n" +
                          "Country: " + country + "\n" +
                          "Gender: " + gender + "\n";
        if(hobbies.length) {
            dataPreview += "Hobbies: " + hobbies.join(", ");
        }
        // Display input data in a dialog box before submitting the form
        alert(dataPreview);
    }
};

// Defining a function to display error message

function printError(elemId, hintMsg) {

document.getElementById(elemId).innerHTML = hintMsg;

}

// Defining a function to validate form

function validateForm() {

// Retrieving the values of form elements

var name = document.contactForm.name.value;

var email = document.contactForm.email.value;

var mobile = document.contactForm.mobile.value;

var country = document.contactForm.country.value;

var gender = document.contactForm.gender.value;

var hobbies = [];

var checkboxes = document.getElementsByName("hobbies[]");

for(var i=0; i < checkboxes.length; i++) {

if(checkboxes[i].checked) {

// Populate hobbies array with selected values

hobbies.push(checkboxes[i].value);

}

// Defining error variables with a default value

var nameErr = emailErr = mobileErr = countryErr = genderErr = true;

// Validate name

if(name == "") {

printError("nameErr", "Please enter your name");

} else {

var regex = /^[a-zA-Z\s]+$/;

if(regex.test(name) === false) {

printError("nameErr", "Please enter a valid name");

} else {

printError("nameErr", "");

nameErr = false;

}

// Validate email address

if(email == "") {

printError("emailErr", "Please enter your email address");

} else {

// Regular expression for basic email validation

var regex = /^\S+@\S+\.\S+$/;

if(regex.test(email) === false) {

printError("emailErr", "Please enter a valid email address");

} else{

printError("emailErr", "");

emailErr = false;

}

// Validate mobile number

if(mobile == "") {

printError("mobileErr", "Please enter your mobile number");

} else {

var regex = /^[1-9]\d{9}$/;

if(regex.test(mobile) === false) {

printError("mobileErr", "Please enter a valid 10 digit mobile number");

} else{

printError("mobileErr", "");

mobileErr = false;

}

// Validate country

if(country == "Select") {

printError("countryErr", "Please select your country");

} else {

printError("countryErr", "");

countryErr = false;

}

// Validate gender

if(gender == "") {

printError("genderErr", "Please select your gender");

} else {

printError("genderErr", "");

genderErr = false;

}

// Prevent the form from being submitted if there are any errors

if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {

return false;

} else {

// Creating a string from input data for preview

var dataPreview = "You've entered the following details: \n" +

"Full Name: " + name + "\n" +

"Email Address: " + email + "\n" +

"Mobile Number: " + mobile + "\n" +

"Country: " + country + "\n" +

"Gender: " + gender + "\n";

if(hobbies.length) {

dataPreview += "Hobbies: " + hobbies.join(", ");

}

// Display input data in a dialog box before submitting the form

alert(dataPreview);

}

};

با استفاده ازdocument.formName.fieldName.value یا document.getElementsByName(name).value می‌توان به مقدار یک فیلد فرم فردی دسترسی پیدا کرد و بازیابی کرد.اما، برای دریافت مقادیر از یک فیلد فرم که از چندین انتخاب پشتیبانی می کند، مانند گروهی از چک باکس ها، باید از عبارت حلقه همانطور که در مثال بالا نشان داده شده است استفاده کنید (خط 14 تا 21).

همچنین برای بررسی اینکه آیا فرمت داده های ورودی درست است یا نه، از عبارات منظم استفاده کرده ایم. این یکی از موثرترین تکنیک ها برای اعتبارسنجی ورودی های کاربر است.

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

افزودن استایل شیت برای زیباسازی فرم

در نهایت فایلی با نام style.css ایجاد کنید و کد زیر را در آن قرار دهید و سپس آن را در همان مکانی که دو فایل قبلی را ذخیره کرده اید ذخیره کنید. اینها قوانینی برای زیباسازی فرم ما هستند.

body {
    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}

body {

font-size: 16px;

background: #f9f9f9;

font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

}

h2 {

text-align: center;

text-decoration: underline;

}

form {

width: 300px;

background: #fff;

padding: 15px 40px 40px;

border: 1px solid #ccc;

margin: 50px auto 0;

border-radius: 5px;

}

label {

display: block;

margin-bottom: 5px

}

label i {

color: #999;

font-size: 80%;

}

input, select {

border: 1px solid #ccc;

padding: 10px;

display: block;

width: 100%;

box-sizing: border-box;

border-radius: 2px;

}

.row {

padding-bottom: 10px;

}

.form-inline {

border: 1px solid #ccc;

padding: 8px 10px 4px;

border-radius: 2px;

}

.form-inline label, .form-inline input {

display: inline-block;

width: auto;

padding-right: 15px;

}

.error {

color: red;

font-size: 90%;

}

input[type="submit"] {

font-size: 110%;

font-weight: 100;

background: #006dcc;

border-color: #016BC1;

box-shadow: 0 3px 0 #0165b6;

color: #fff;

margin-top: 10px;

cursor: pointer;

}

input[type="submit"]:hover {

background: #0165b6;

}

خب، اکنون فایل “application-form.html” را در یک مرورگر وب باز کنید و سعی کنید برخی از داده ها را پر کنید و ببینید وقتی یک داده نامعتبر در فیلد فرم وارد می شود، اسکریپت چگونه پاسخ می دهد.خروجی نهایی نیز به این شکل خواهد بود.

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

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

سایر مقالات:

Error Handling در جاوا اسکریپت

ریجکس در جاوا اسکریپت

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

[کل: 3 میانگین: 5]

اشتراک‌گذاری

ریجکس در جاوا اسکریپت نوشته قبل

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

علی فرجی

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