پلاگین اعتبارسنجی JQuery

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

پلاگین اعتبارسنجی JQuery

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

پلاگین JQuery.mbValidation یک ابزار مفید برای اعتبارسازی صفخات وب در سمت کاربر میباشد که از دستورات جاوا اسکریپت استفاده می کند . این پلاگین را می توان به راحتی به web forms خود اضافه کنیم .با استفاده از این پلاگین بیشترین خروجی را با کمترین کد نویسی به همراه داریم .

برای این کار ابتدا باید فایل های JQuery را به پروژه خود اضافه کنیم :

سپس JQuery-1.10.2.js را نیز به پوشه Script اضافه میکنیم .در ادامه ساختار mb-ui.css را مشاهده میکنیم , همچنین میتوانیم پیغام خطا موجود در پلاگین JQuery.mbValidation را مدیریت کنیم .

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;  
}  

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

<!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>  
                         
                    </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>  

همراه با افزودن این پلاگین به نرم افزار خود باید منبع JQuery.js و JQuery.mbValidation.js و mb-ui.css را به پروژه اضافه کنیم .

ابتدا لینک های مربوط به اسکریپت و Css را اضافه می کنیم :

<script src="jquery.js"></script>  
<script src="jQuery.mbValidations.js"></script>  
<link rel="stylesheet" type="text/css" href="mb-ui.css"/>  

سپس تابع  JQuery.mbValidation را در صفحه می نویسیم .

$(document).ready(function () {  
   // Only numeric values allowed  
   $("#txtDemoField1").ForceOnlyNumeric();  
   // Only alphabets allowed  
   $("#txtDemoField2").ForceOnlyAlpha();  
   // Only alpha-numeric values allowed  
   $("#txtDemoField3").ForceOnlyAlphaNumeric();  
   // Data with specific length allowed  
   $("#txtDemoField4").MaxLength(8);  
   // Only amount allowed  
   $("#txtDemoField5").ForceAmount();  
   // To allowe valid email address  
   $("#txtDemoField6").ForceEmail();  
   // To allow valid contact number  
   $("#txtDemoField7").ForceContactNumber();  
   // Data with specific length required  
   $("#txtDemoField8").MinLength(3);  
    // To allow valid URL  
   $("#txtDemoField9").ForceURL();  
});  

برای اینکه کاربر را مجاب به تکمیل کنترل های مورد نظر کنیم باید کلاس "class="required را قرار دهیم .و متد ()PerformValidation را در رویداد کلیک دکمه می نویسیم

<input type="text" id="txtDemoField1" class="required" />  
<button id="btnValidate" type="button" onClick="PerformValidations();">Validate</button>  

 

فایل های ضمیمه