"> چک کردن معتبر بودن توسط JQuery در وب فرم ها

چک کردن معتبر بودن توسط JQuery در وب فرم ها

معتبر بودن توسط JQuery

JQuery.mbValidation Plugin یک ابزار عالی برای چک کردن معتبر بودن توسط JQuery و داده های ورودی در سمت مشتری با استفاده از JavaScript در صفحات وب میباشد. بسیار آسان است که این Plugin را با برنامه های وبتان ادغام کنید و معتبرسازی های فراوانی بر روی وب فرم ها انجام دهید.

 

چک کردن معتبر بودن JQueryمعرفی

این مقاله یک مثال استفاده از ورودی JQuery.mbValidation میباشد. برای تماشای دموی زنده ورودی JQuery.mbValidation بر روی لینک زیر کلیک کنید.

نمایش دمو

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

خصوصیات معتبرسازی

ForceOnlyNumeric : این ویژگی اجازه میدهد تا تنها اعداد یا ارزش های عددی در فیلد ورودی وارد شوند.

ForceOnlyAlpha : این ویژگی اجازه میدهد تا تنها حروف یا ارزش های عددی در فیلد ورودی وارد شوند.

ForceOnlyAlphaNumeric : این ویژگی اجازه میدهد تا تنها حروف و اعداد یا ارزش های حرفی/عددی در فیلد ورودی وارد شود.

MaxLength(Number) : این ویژگی برای محدود کردن بیشترین طول ممکن برای ارزش وارد شده در فیلد ورودی به کار میرود.

ForceAmount : این ویژگی به منظور معتبر سازی مقدار وارد شده در فیلد ورودی به کار میرود.

ForceEmail : این ویژگی به منظور معتبرسازی ایمیل وارد شده در فیلد ورودی میباشد.

ForceContactNumber : این ویژگی به منظور معتبرسازی شماره مخاطب وارد شده در فیلد ورودی میباشد.

MinLength(Number) : این ویژگی به منظور معتبرسازی حداقل طول در فیلد ورودی میباشد.

ForceURL : این ویژگی به منظور معتبرسازی آدرس وارد شده در فیلو ورودی میباشد.

کد                     

ساختار Solution ویژوال استودیوی ۲۰۱۲ مایکروسافت الحاقی مانند زیر است :

 

JQuery.mbValidation Plugin بر روی JQuery Plugin برای کار کردن تکیه میکند. به همین منظور فایل jquery-1.10.2.js را به فولدر Scripts اضافه میکنم. همچنین میتوانید از فایل فشرده ی jquery.min.js را استفاده کنید. من jquery-ui.css را برای صفحه ی دمو و mb-ui.css که برای jQuery.mbValidation Plugin موردنیاز است را اضافه میکنم.

این هم ساختار فایل mb-ui.css . شما میتوانید پیغام خطای jQuery .mbValidation Plugin را با اصلاح این فایل CSS سفارشی کنید.

body {
font: 62.5% "Trebuchet MS", sans-serif;
}
.custom-error {
z-index: 1000;
position: absolute;
background-color: white;
color: red;
border: 1px solid gray;
padding: 3px;
font: 62.5% "Trebuchet MS", sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: 1.1em;
font-family: Verdana,Arial,sans-serif;
}

 

در ادامه صفحه ی دمو که همان فایل index.html میباشد , را میبینید :

<!DOCTYPE html>
<html>
<head>
<title>jQuery.mbValidation Demo</title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/jQuery.mbValidations.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/mb-ui.css"/>
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css"/>
</head>
<body>
<center>
<h2>jQuery.mbValidation Plugin Demo 1.0</h2>
<table style="font-size: 1.1em;font-family: Verdana,Arial,sans-serif;padding:1em">
<tr>
<td>
<label>Enter Number Here :</label>
</td>
<td>
<input type="text" id="txtDemoField1" class="text ui-widget-content ui-corner-all required" />
</td>
</tr>
<tr>
<td>
<label>Enter Alphabet Here :</label>
</td>
<td>
<input type="text" id="txtDemoField2" class="text ui-widget-content ui-corner-all required" />
</td>
</tr>
<tr>
<td>
<label>Enter Number or Alphabet Here :</label>
</td>
<td>
<input type="text" id="txtDemoField3"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Text Having Length 8 Here:</label>
</td>
<td>
<input type="text" id="txtDemoField4"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Text With Minimum Length 3 Here:</label>
</td>
<td>
<input type="text" id="txtDemoField9"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Amount Here :</label>
</td>
<td>
<input type="text" id="txtDemoField5"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Email Id Here :</label>
</td>
<td>
<input type="text" id="txtDemoField6"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Contact Number Here :</label>
</td>
<td>
<input type="text" id="txtDemoField7"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter Data For Required Field :</label>
</td>
<td>
<input type="text" id="txtDemoField8"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td>
<label>Enter URL :</label>
</td>
<td>
<input type="text" id="txtDemoField10"  class="text ui-widget-content ui-corner-all required"/>
</td>
</tr>
<tr>
<td style="text-align:center">
<input type="checkbox" id="txtDemoField11" name="accept" value="accept" class="required">I Agree
</td>
</tr>
<tr>
<td>
</td>
<td>
<button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button>
<button id="btnClear" type="button" onClick="ClearRequiredMark();">Clear</button>
</td>
</tr>
</table>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#txtDemoField1").ForceOnlyNumeric();
$("#txtDemoField2").ForceOnlyAlpha();
$("#txtDemoField3").ForceOnlyAlphaNumeric();
$("#txtDemoField4").MaxLength(8);
$("#txtDemoField5").ForceAmount();
$("#txtDemoField6").ForceEmail();
$("#txtDemoField7").ForceContactNumber();
$("#txtDemoField9").MinLength(3);
$("#txtDemoField10").ForceURL();
});
$(function () {
$("#btnValidate").button();
$("#btnClear").button();
});
</script>
</body>
</html>

 

برای معتبرسازی فیلد موردنیاز , class=”required” را برای ورودی و فراخوانی PerformValidation() را بر روی دکمه ها در رویداد کلیک شان مشخص میکنیم.

<input type="text" id="txtDemoField1" class="required" />

<button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button>

 

 

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

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

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم