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

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

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

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

فرم های وب تبدیل به یک بخش اساسی و مهم از اپلیکشن های تحت وب شده اند و معمولا برای جمعاوری اطلاعات کاربر مثل نام, آدرس ایمیل, مکان, سن و… استفاده می شوند. اما ممکن است که کاربر اطلاعاتی را بنابر چیزی که انتظار داشتیم, وارد نکند.

بنابراین برای ذخیره پهنای باند و جلوگیری از ارسال درخواست های غیرضروری و مصرف منابع سرور می توانید داده ها را در سمت کلاینت (سیستم کاربر) با استفاده از جاوا اسکریپت قبل از پاس دادن آن به وب سرور برای انجام عملیات پردازش, اعتبارسنجی (validate) کنیم.

اعتبارسنجی سمت کاربر (Client-Side) می تواند برای ساخت تجربه کاربر بهتر مفید باشد. همچنین سریعتر است چرا که اعتبارسنجی در مرورگر کاربر انجام می شود.

اما اعتبارسنجی سمت سرور (Server-side) نیاز به سابمیت شدن ورودی های کاربر به سمت سرور و بعد اعتبارسنجی آنها دارد. همچنین کاربر باید کمی برای دریافت پاسخ از سمت سرور صبر کند تا دقیقا بداند چه موردی اشتباه است.

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

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

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

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

حالا, قصد داریم یک مثال جامع برای یادگیری نحوه اعتبارسنجی فرم در جاوا اسکریپت را ببینم.

ساخت فرم HTML

اولین کار این است که یک فرم ساده HTML بسازیم که کاربر با کلیک روی دکمه submit اطلاعات وارد شده را ارسال کند. سپس این فایل را با نام 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

اما برای دریافت مقادیری که انتخاب های چندگانه را پشتیبانی می کنند مثل گروه چک باکس ها, نیاز است که یک دستور loop را اجرا کنید (خط ۱۴ تا ۲۱)

همچنین می توانید فرمت داده های وارد شده را با تکنیک Regex که یکی از بهترین و موثرترین تکنیک های اعتبارسنجی ورودی های کاربر است, اعتبارسنجی کنید.

علاوه بر این, اسکریپت بالا اطلاعات وارد شده توسط کاربر را در یک پنجره پیام هشدار alert به منظور پیش نمایش قبل از سابمیت فرم به سمت وب سرور را نشان می دهد.

نکته: به هر حال می توانید فرمت ایمیل را با عبارت با قاعده (Regex) اعتبارسنجی کنید. اما کاربر ممکن است یک ایمیل با فرمت مناسب که اصلا وجود ندارد وارد کند.

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

درنهایت, یک فایل با نام 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;

}

خب تمام شد, حالا می توانید فایل form.html را در مرورگر وب خود باز کرده و سعی در وارد کردن بعضی از مقادیر کنید تا ببینید که اسکریپت به داده های نامعتبر چه واکنشی می دهد.

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

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

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

موفق باشید.