قسمت اول:اعتبار سنجی سمت کلاینت با استفاده از dijit.form.ValidationTextBox
قسمت دوم:اعتبارسنجی فرم ها در دوجو
ValidationTextBox یک المان <input> است که با استفاده از امکانات خود طراح را مطمئن می کند که مقادیر وارد شده کاملا معتبر است. در مواردی که مقدار غیر معتبر وارد شود با تغییر رنگ ، نمایش آیکون و نشان دادن tooltip این ارور به کاربر اطلاع داده می شود.
یکی از تغییرات بزرگ ورژن ۱٫۷ دوجو ،پشتیبانی کامل از AMD هست،و تغییر بزرگ دیگر ،استاندارد سازی همه ی تگ ها و attribute -هاست.به این معنی که همه ی attribute -های سفارشی(custom) ، به attribute استاندارد data-dojo-* HTML5 تبدیل شده است.
همه ی attribute-های سفارشی تا ورژن ۲ و data-dojo-* attribute از ورژن ۱٫۷ قابل استفاده است.
required
مشخص کردن این attribute که از جنس boolean است مشخص می کند که این فیلد باید حتما پر شود یا نه،به صورت پیش فرض مقدار false دارد.
dojo < 2<br/>
<input type="text" name="name" required="true" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-type="dijit.form.ValidationTextBox"/>
trim
برای حذف کردن همه ی فاصله ها در اول و آخر یک فیلد از این attribute استفاده میکنیم.به صورت پیش فرض این attribute مقدار false را دارد و به معنی عدم حذف فاصله ها در حالت پیش فرض است.
dojo < 2<br/>
<input type="text" name="name" trim="true" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" trim="true" data-dojo-type="dijit.form.ValidationTextBox"/>
promptMessage
اگر بخواهیم توضیح یا راهنمایی برای فیلد خاصی بنویسیم تا در موقع پر کردن فیلد نمایش داده شود از promptMessage attribute استفاده می کنیم.این attribute در حالت پیش فرض مقداری ندارد.
dojo < 2<br/>
<input type="text" name="name" required="true" promptMessage="نوشته برای نمایش" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="promptMessage:'نوشته برای نمایش'" data-dojo-type="dijit.form.ValidationTextBox"/>
missingMessage
اگر مقدار required=”true” تنظیم شود،و در موقع سابمیت فرم هیچ مقداری در آن فیلد وارد نگردد بعد از focus دوباره در آن ، این پیغام نمایش داده می شود.
dojo < 2<br/>
<input type="text" name="name" required="true" missingMessage="نوشته در زمان فراموشی پر کردن" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="missingMessage:'نوشته در زمان فراموشی پر کردن'" data-dojo-type="dijit.form.ValidationTextBox"/>
invalidMessage
در پاراگراف های بعدی این نوشته نحوه اعتبار سنجی یک فیلد را توضیح خواهم داد ولی اگر مقدار وارد شده برای یک فیلد صحیح نباشد این پیغام نمایش داده می شود.
dojo < 2<br/>
<input type="text" name="name" required="true" invalidMessage="نوشته در زمان invalid" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="invalidMessage:'نوشته در زمان invalid'" data-dojo-type="dijit.form.ValidationTextBox"/>
regExp
استفاده از عبارات منظم(regular expression) یکی از روش هایی است که برای اعتبار سنجی استفاده می شود،قوانین (نحو – syntax) عبارات منظم در دوجو، مستقیما از قوانین عبارات منظم در جاوا اسکریپت تبعیت می کند،
در regular expression برای مشخص کردن ابتدا از ^ و انتها از $ استفاده می کنیم،که این دو قانون به صورت پیش فرض در regExp دوجو رعایت می شود و لازم به ذکر آنها نیست.
کد زیر یک مثال ساده از استفاده از regExp برای اعتبارسنجی کد پستی ۱۰ رقمی می باشد.
dojo < 2<br/>
<input type="text" name="name" required="true" regExp="\d{10,10}" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="regExp:'\\d{10,10}'" data-dojo-type="dijit.form.ValidationTextBox"/>
regExpGen
ValidationTextBox همچنین قابلیت پشتیبانی از عبارات منظم(regular expression) دینامیک را دارد،البته به همراه regExpGen می توان از dojo.regexp.*(که در نوشته های بعدی توضیح می دهم) نیز استفاده کنیم.
بعد از اجرای کد زیر فیلدهای ما قابلیت قبول دو نوع مقدار را دارد،برای مثال اگر کاراکتر اول وارد شده برابر ۰ باشد حدس میزنیم که کاربر قصد وارد کردن شماره تلفن و در غیر اینصورت قصد وارد کردن کدپستی ۱۰ رقمی را دارد .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
//dojo.require("dijit.form.ValidationTextBox"); //dojo < 2 or use below line
require(["dojo/parser", "dijit/form/ValidationTextBox","dijit/form/Form"]); // dojo >= 1.7
var regExpFunc = function(constraints){
if(this.displayedValue.substr(0,1)=='0'){
return "\\d{11}";
}else{
return "\\d{10}";
}
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />
</head>
<body class="claro" dir="rtl">
dojo < 2<br/>
<input type="text" name="name" required="true" regExpGen="regExpFunc" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="regExpGen:regExpFunc" data-dojo-type="dijit.form.ValidationTextBox"/>
</body>
</html>
validator
اگر قابلیت های بالا امکان اعتبارسنجی را به طور کامل به شما نمی دهد می توانید از validator attribute استفاده کنید تا از تابعی خاص برای اعتبار سنجی بهره ببرید،برای یک مثال واقعی در مورد استفاده از این قابلیت می توان به اعتبارسنجی کدملی اشاره کرد که باید مقدار وارد شده برای تابعی ارسال و بعد پاسخ معتبر بودن یا نبودن مقدار مشخص شود.
کد زیر مثال ساده از امکان validator در ValidationTextBox را نشان می دهد،اگر طول مقدار وارد شده برابر ۳ بود آن مقدار معتبر در غیر اینصورت نامعتبر است:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
//dojo.require("dijit.form.ValidationTextBox"); //dojo < 2 or use below line
require(["dojo/parser", "dijit/form/ValidationTextBox","dijit/form/Form"]); // dojo >= 1.7
var someFunction = function(node){
if(node.get('value').length==3){
return true;
}else{
return false;
}
}
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />
</head>
<body class="claro" dir="rtl">
dojo < 2<br/>
<input type="text" name="name" required="true" validator="return someFunction(this)" dojoType="dijit.form.ValidationTextBox"/>
<br/>
dojo >= 1.7<br/>
<input type="text" name="name" required="true" data-dojo-props="" data-dojo-type="dijit.form.ValidationTextBox"/>
</body>
</html>
تقریبا امکان استفاده از همه ی قابلیت های بالا در ویجت های دیگر دوجو مانند NumberTextBox NumberSpinner CurrencyTextBox DateTextBox TimeTextBox وجود دارد.
در مطلب بعدی در مورد dijit.form.Form و استفاده از آن به همراه dijit.form.ValidationTextBox خواهم نوشت.