اعتبار سنجی فرم توسط jquery

پنجشنبه 27 فروردین 1394

در این مقاله برای ارزشیابی وب فرم ها از پلاگین جیکوئری استفاده خواهیم کرد

اعتبار سنجی فرم توسط jquery
در این مقاله برای ارزشیابی وب فرم ها از پلاگین جی کوئری استفاده خواهیم کرد
پلاگینjQuery.mbValidation  یک ابزار عالی برای صفحات وب به اعتبار مطالب ، اطلاعات در سمت سرویس گیرنده با استفاده از جاوا اسکریپت است.  ادغام این پلاگین به برنامه وب خود بسیار آسان است و انجام بسیاری از امکان سنجی در فرم های وب. ،  امکان سنجی صفحه وب و برای به دست آوردن حداکثر خروجی با برنامه نویسی کمتر است.
برای این مثال به Jquery 1.10.2.js و jQuery.mbValidation  داریم همچنین دو فایل css  ب پروژه خود اضافه می کنیم:ui.css و mb-ui.css
برای error ها :
.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</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 dir="rtl">
        <center>
            <h2>ارزشیابی فرم توسط jquery</h2>
                 <table style="font-size: 1.1em;font-family: Verdana,Arial,sans-serif;padding:1em">
                <tr>
                    <td>
                        <label>شماره را وارد کنید:</label>
                    </td>
                    <td>
                        <input type="text" id="txtDemoField1" class="text ui-widget-content ui-corner-all required" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>حروف را وارد کنید:</label>
                    </td>
                    <td>
                        <input type="text" id="txtDemoField2" class="text ui-widget-content ui-corner-all required" />
                    </td>
                </tr>
  
                <tr>
                    <td>
                        <label>متن دارای 8 کاراکتر را وارد کنید:</label>
                    </td>
                    <td>
                        <input type="text" id="txtDemoField4"  class="text ui-widget-content ui-corner-all required"/>
                    </td>
                </tr>
				<tr>
                    <td>
                        <label>حداقل متن سه کاراکتر:</label>
                    </td>
                    <td>
                        <input type="text" id="txtDemoField9"  class="text ui-widget-content ui-corner-all required"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>قیمت را وارد کنید :</label>
                    </td>
                    <td>
                        <input type="text" id="txtDemoField5"  class="text ui-widget-content ui-corner-all required"/>
                    </td>
                </tr>

                 <tr>
                    <td>
                       
                    </td>
                    <td>
                        <button id="btnValidate" type="button" onClick="PerformValidations();">ارزشیابی</button>
                        <button id="btnClear" type="button" onClick="ClearRequiredMark();">پاک کردن</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>

در بخش head  صفحه رفرنس های زیر داده ایم:

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

ودر پایین صفحه برای بررسی و ارزشیابی مقادیر وارد شده از تابع زیر استفاده کرده ایم:

$(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();  
}); 

برای فیلد اجباری به تگ input کلاس class="required" را میدهیم و در رویداد Onclick  تابع PerformValidations فراخوانی میشود:

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

 

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید