اعتبار سنجی فرم ها به صورت Client Side
بسم الله الرحمن الرحیم
اعتبار سنجی فرم ها با html5
یکی از بخش های مهم هر پروژه نرم افزاری، اعتبارسنجی اطلاعات است، در تمامی فرم ها شما نیاز خواهید داشت تا اطلاعات ورودی کاربر را بررسی کنید تا از صحت اطلاعات وارد شده اطمینان حاصل کنید.
با توجه به تکنولوژی های مورد استفاده نظیر PHP, JSP, ASP.NET و.. برای توسعه صفحات وب شما می توانید از روش های متفاوتی استفاده کنید.
در این آموزش قصد داریم تا شما را با یکی از ساده ترین روشهای اعتبارسنجی اطلاعات در سمت کلاینت آشنا کنیم. طبیعتا همه شما امروزه خواه و ناخواه از دستورات HTML5 استفاده می کنید، در این آموزش نیز می خواهیم با استفاده از دستورات HTML5 اعتبارسنجی اطلاعات ورودی کاربر را در سمت کلاینت بررسی کنیم.
از همین رو شما می توانید از این آموزش در تکنولوژی های مختلف توسعه صفحات وب استفاده کنید.
در مبحث اعتبارسنجی اطلاعات در Client Side در گذشته تنها توسط کدهای java Script و یا با استفاده ا ز یک Framework (مانند jQuery validation plugin) صورت می گرفت، اما با معرفی HTML5 این روش رویکرد تغییر کرد زیرا شما برای انجام اعتبارسنجی نیاز به کدهای پیچیده java script ندارید.
اعتبارسنجی فرم ها با HTML5
HTML5 با ارائه attribute های type, pattern و requireدر تگ <input /> به ما اجازه می دهد به سادگی اطلاعات ورودی کاربر را بررسی و Validate کنیم.
در این آموزش نیز مانند همیشه سعی خواهیم کرد با مثال های متفاوت روش های مختلف Validation را بررسی کنیم.
آموزش Type Attribute
type Attribute اولین Attribute ایی است که در HTML5 برای کنترل مقادیر ورودی کاربر مورد استفاده قرار می گیرد. توسط این Attribute شما مشخص می کنید که کنترل input شما چیست. با چند مثال این ویژگی را بررسی خواهیم کرد.
<input type="text" />با همین کد ساده ی بالا شما مشخص کردید که کاربر می توانید هر گونه مقدار متنی را در کنترل مربوطه وارد کند.
حال اگر قرار باشد کاربر تنها در input مربوطه فقط ایمیل را بتواند وارد کند کد ما به صورت زیر خواهد بود.
<input type="email" />این کد باعث می شود تا کاربر تنها بتواند متنی را وارد کند که ساختار یک ایمیل واقعی را دارد، در صورتی که کاربر مقدار صحیحی وارد نکرده باشد پیام خطایی به کاربر نمایش داده خواهد شد و تا زمانی که اطلاعات صحیح وارد نشده باشد فرم به سمت سرور ارسال نخواهد شد.
Type Attribute مقادیر بسیار زیادی را می تواند دریافت کند، که وابسته به مقداری که دریافت می کند، کاربر را مجبور می سازد مقدار صحیح وارد کند.
چند مثال دیگر از type Attribute را برای شما در اینجا قرار داده ایم که می توانید آنها را تست کنید.
<input type="number" />
<input type="url" />
<input type="tel" />
همانطور که می دانید ساختار شماره تلفن در کشورهای مختلف متفاوت است به همین دلیل شما باید علاوه بر استفاده کردن از type Attribute از Attribute دیگری با نام pattern برای کنترل مقادیر ورودی استفاده کنید در غیر این صورت مقادیر ورودی کاربر بررسی نخواهد شد.
آموزش Pattern Attribute
این Attribute به شما اجازه می دهد تا توسط Regular Expression ها pattern ایی ایجاد کنید که بر اساس این pattern مقادیر ورودی کاربر بررسی شود.
Regular expressions زبانی هستند که بر اساس یک pattern مقادیر ورودی را بررسی می کنند و نتیجه محاسبه را اعلام می کنند. امروزه Regular expressions در همه ی زبان های برنامه نویسی برای بخش های مختلف مورد استفاده قرار می گیرند.
Regular expressions که (RegEX) معمولا خوانده می شوند برای بررسی متن ها و الگوها (pattern) های مختلف مورد استفاده قرار می گیرند.
برای درک بهتر این موضوع، در این جا چندین مثال را با هم بررسی خواهیم کرد. برای شروع یک RegEX برای بررسی صحت شماره تلفن وارد شده را خواهیم نوشت.
تلفن های ایران معمولا به صورت 3 رقم کد شهرستان و 8 رقم شماره تلفن مشترک می باشد، پس کاربر باید شماره ای به صورت xxx-xxxxxxxx وارد نماید. برای این الگو ما باید RegEX به صورت زیر بنویسیم.
^\d{4}-\d{3}-\d{4}$RegEX ها باید یک علامت ^ آغاز می شوند و با یک علامت $ به اتمام می رسند. d\ به معنای یک عدد می باشد و وقتی ما {3}d\ می نویسیم، یعنی کاربر باید 3 عدد را ذکر کند.
<input type="tel" pattern="^\d{4}-\d{3}-\d{4}$" >
اگر بخواهیم در input ایی فقط کاربر حروف و اعداد را ثبت کند و نتواند هیچ کاراکتر خاصی مانند !@$# و غیره را ثبت کند باید به صورت زیر عمل کنیم.
<input type="text" pattern="[a-zA-Z0-9]+" >علامت + به معنای یک حرف و یا بیشتر است، یعنی در مثال بالا حداقل کاربر باید یک حرف را وارد کند.
نوشتن یک Regular expressions بر اساس قوانین مشخص می باشد، برای آشنایی با قوانین Regular expressions می توانید از اطلاعات زیر استفاده کنید و هر نوع الگو (pattern) را ایجاد کنید.
آموزش Regular expressions
|
Character |
Meaning |
Example |
|
* |
Match zero, one or more of the previous |
Ah* matches "Ahhhhh" or "A" |
|
? |
Match zero or one of the previous |
Ah? matches "Al" or "Ah" |
|
+ |
Match one or more of the previous |
Ah+ matches "Ah" or "Ahhh" but not "A" |
|
\ |
Used to escape a special character |
Hungry\? matches "Hungry?" |
|
. |
Wildcard character, matches any character |
do.* matches "dog", "door", "dot", etc. |
|
( ) |
Group characters |
See example for | |
|
[ ] |
Matches a range of characters |
[cbf]ar matches "car", "bar", or "far" |
|
| |
Matche previous OR next character/group |
(Mon)|(Tues)day matches "Monday" or "Tuesday" |
|
{ } |
Matches a specified number of occurrences of the previous |
[0-9]{3} matches "315" but not "31" |
|
^ |
Beginning of a string. Or within a character range [] negation. |
^http matches strings that begin with http, such as a url. |
|
$ |
End of a string. |
ing$ matches "exciting" but not "ingenious" |
همچنین می توانید از طریق این لینک سایت هایی را که به شما در ساخت Regular expressions کمک می کنند، استفاده کنید.
آموزش Required Attribute
در نهایت آخرین Attribute ایی که از آن استفاده خواهیم کرد required Attribute این Attribute بسیار ساده می باشد و از آن می توانید برای اجباری کردن یک input استفاده کنید.
برای استفاده از این Attribute می توانید به یکی از دو صورت زیر این کار را انجام دهید.
<input type="text" name="my_name" required />
و یا
<input type="text" name="my_name" required="required" />مثال های این آموزش را می توانید از این بخش تست کنید:
See the Pen Vvagdb by Esmaeil (@ABLY-ir) on CodePen.
تغییر متن خطا در html5
طبیعتا در بسیاری از برنامه ها نیاز پیدا خواهید کرد تا متن خطاهای نمایش داده شده را تغییر دهید و یا این خطاها را به صورت فارسی به کاربر اعلام کنید. در خصوص انجام این کار می بایست کدهای jquery مربوط به اعتبارسنجی را override کنید.
در این جا ما پیام خطای مربوط به email را تغییر داده ایم که می توانید از این کد استفاده کنید.
ابتدا فرم html خود را به صورت زیر مانند همیشه ایجاد می کنیم.
<form action="">
<input id="email" type="email" required="required" />
<input type="submit" id="btnSubmit" />
</form>
حال کدهای مربوط به اعتبارسنجی ایمیل را باید مجددا بنویسیم
(function (exports) {
function valOrFunction(val, ctx, args) {
if (typeof val == "function") {
return val.apply(ctx, args);
} else {
return val;
}
}
function InvalidInputHelper(input, options) {
input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));
function changeOrInput() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity("");
}
}
function invalid() {
if (input.value == "") {
input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
} else {
input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
}
}
input.addEventListener("change", changeOrInput);
input.addEventListener("input", changeOrInput);
input.addEventListener("invalid", invalid);
}
exports.InvalidInputHelper = InvalidInputHelper;
})(window);
کدهای بالا کدهای اعتبارسنجی پیش فرض هستند، اما اگر این کدها را به صفحه خود اضافه نکنید نمی توانید متن خطاهای html5 را تغییر دهید، به همین دلیل شما باید در اینترنت جستجو کنید و کدهای هر خطایی را پیدا کنید و سپس آنها را در یک فایل قرار دهید، درنهایت فایل به صفحات html تا از این پس اعتبارسنجی ها توسط فایل شما صورت گیرد.
در نهایت کافی است که برای هر خطا کدی مانند زیر بنویسید تا پیام اعتبارسنجی صورت گرفته تغییر داده شود.
InvalidInputHelper(document.getElementById("email"), {
defaultText: "لطفا ایمیل خود را وارد کنید ably.ir",
emptyText: "لطفا ایمیل خود را وارد کنید ",
invalidText: function (input) {
return 'ایمیل "' + input.value + '" معتبر نیست!';
}
});
در نهایت می توانید این کدها را در بخش زیر تست کنید.
See the Pen اعتبار سنجی فرم ها به صورت Client Side by Esmaeil (@ABLY-ir) on CodePen.
انشالله در آموزش های دیگر نحوه اعتبارسنجی اطلاعات را با استفاده از Node و jQuery نیز بررسی خواهیم کرد.
نظرات (۳)
با عرض سلام
ممنون از لطف شما
با عرض سلام