اعتبار سنجی آسان فرم در Angularjs با استفاده از ngMessages

طراحی وب سایت

طراحی وب سایت

دوستان وب یونیک سلام.در پست های قبلی در مورد Angularjsو امکاناتش برای طراحی وب سایت و مخصوصا برنامه های تحت وب ، مطالب کوتاهی نوشتم.گفته شد که برای پروژه هایی مانند طراحی سایت فروشگاهی و یا سئو سازی و رتبه بندی سایت لازم است که از یه فریم ورک کارا استفاده بشه.در ادامه آشنایی با فریم ورک آنگولار،امروز با هم چند نکته ساده رو در مورد یکی از ماژول های اون به اسم ngMessage بررسی میکنیم.این ماژول در آنگولار 1.3 برای نمایش پیام ها به کاربر ( معمولا پیغام های خطای حاصل از اعتبار سنجی فرم ها) ایجاد شد.قبل از انتشار این ماژول توسعه دهندگان برای نمایش پیغام ها از ng-class و  ng-show استفاده میکردند که باعث به ریختگی و ایجاد کدهای تکراری میشد،اما حالا با ngMessage ما میتونیم پیغام های خطای سفارشی ایجاد کنیم.

 

شروع طراحی وب سایت با آنگولار

:


برای شروع اول یه قالب html ساده رو برای خودمون ایجاد میکنیم:

اگه دقت کنید میبینید که قبل از اینکه ماژول ngMessage رو به برنامه بدم،فایل های آنگولار رو با تگ اسکریپت داخل برنامه لود کردم.(خط 9و10)کدهای این آموزش رو میتونید از لینک زیر بردارید :

github.com/sitepoint-editors/SpNgMessages و یا دموی آموزش رو از لینک پایین ببینید:

sitepoint.com/easy-form-validation-angularjs-ngmessages/#in-page-demo

خب حالا یک فرم ایجاد میکنم با یک سری فیلد و به همه فیلدها خاصیت  required میدم تا پر کردن اونا توسط کاربر الزامی بشه بعد برای هرکدوم دایرکتیو  ng-model   تعریف میکنم تا به ویژگی های scope جاری وصلشون کنم:

 

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


اسمی که من به فرمم دادم exampleForm هستش.وقتی میخواهیم از دایرکتیو ng-Message استفاده کنیم باید اسم فرم رو همراه با اسم فیلدمون و یک شی که معمولا اسمش رو error$  میذاریم ،پشت سر هم به عنوان مقدار به دایرکتیو بدیم:

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

استفاده میکنیم.در تکه کد بالا مقداری که به ng-message میدیم بسته به اینکه نوع اعتبارسنجی برای اون فیلد چی بوده انتخاب میشه.در مورد مثال بالا چون فیلد اجباری بود پس مقدار ng-message رو required گذاشتم:

 

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


برای فیلد ایمیل ما همیشه نیاز داریم که مطمئن بشیم کاربر ایمیل رو صحیح وارد کرده .خوشبختانه html5 کار رو برای ما راحت کرده و کافیه که خصوصیت name رو email قرار بدیم و یه رشته شامل نام فرم ،نام input، و شیerror$ میسازیم و به دایرکتیو ng-message پاس میدیم .بعد با ساخت div های اضافی میتونیم پیغام خطاهای مختلف رو برای حالتهای مختلف validate فرم ایجاد و به کاربر نمایش بدیم.مثلا اگه فیلد رو پر نکرد چه پیامی نشون بده و یا اگه فیلد رو به طور صحیح پر نکرد چه پیامی نشون بده:

 

استفاده از عبارات منظم (Regular Expressions):


برای اینکه کاربر،شماره تلفن رو به همون صورتی که ما میخواهیم وارد بکنه از دایرکتیو ng-pattern استفاده میکنم.با استفاده از این دایرکتیو برای ورودی های کاربر یه الگوی خاص رو در نظر میگیرم تا کاربر طبق همون الگو اطلاعات وارد کنه.برای این مثال من الگو رو به صورت زیر در نظر میگیرم:

/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/

شماره های زیر طبق این الگو هستند و کاربر مجاز به وارد کردنشونه:

(123) 456-7890
123-456-7890
123.456.7890
1234567890
+31636363634
075-63546725

خب حالا میتونیم با پاس دادن مقدار pattern به دایرکتیو ng-message یک پیغام خطا ایجاد کنیم تا وقتی کاربر طبق این الگو اطلاعات وارد نکرده متوجه اشتباهش بشه:

برای آشنایی بیشتر با  regular expressions میتونید از لینک پایین استفاده کنید:

developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

و هم چنین لینک developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.

 

تعیین مقدار ماکزیمم و مینیمم برای ورودی ها:


برای اینکه حداقل و حداکثر کاراکتری که کاربر مجاز به وارد کردن برای یه فیلد هست رو مشخص کنم از خصوصیات ng-minlength و  ng-maxlength استفاده میکنم که هردوتاشون یه عدد صحیح میگیرن که به ترتیب برای تعیین حداقل و حداکثر کاراکتر ورودی هست:

یکی از بهترین چیزها در مورد ng-message اینه که این امکان رو به ما میده که دایرکتیوهای مختلف رو با همدیگه به کار ببریم.برای مثال ما میتونیم پیغام خطا را با اضافه کردن جمله :

ng-if=”exampleForm.inputName.$dirty

بعد از دایرکتیو ng-message به صورت شرطی دربیاریم:

حالا برای بخش usermessage ، تا وقتی که روی فیلد مربوطه هستیم هیچ پیغام خطایی نمایش داده نمیشه.دقت کنید که در شرطمون dirty$ را به کار بردیم.شما میتونید هر شرط دلخواه رو قرار بدین.

همچنین آنگولار به ما اجازه میده که دایرکتیوهای ng-Message رو با دایرکتیو ng-Animate با هم استفاده کنیم و انیمیشن های سفارشی برای نمایش دادن و مخفی کردن پیغام های خطا ایجاد کنیم.

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