اعتبارسنجی ASP.Net WebForm با jQuery

در این مقاله می خواهیم اعتبار سنجی jQuery با ASP.NET وب را بررسی کنیم. ما از پلاگین اعتبارسنجی jQuery بطور گسترده استفاده می کنیم. استفاده از یک کتابخانه برای انجام اعتبارسنجی فرم می تواند باعث صرفه جویی در زمان زیادی شود. کتابخانه اعتبارسنجی فرم jQuery یکی از رایج ترین و آسان ترین کتابخانه ها برای استفاده در وب فرم می باشد.

اعتبارسنجی ASP.Net WebForm با jQuery

برای اعتبار سنجی یک وب فرم با استفاده از کتابخانه jQuery، نیاز به فایل های اسکریپت زیر در صفحه master page یا صفحه وب می باشد.

<!--include jQuery -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"  
type="text/javascript"></script>   
<!--include jQuery Validation Plugin-->  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"  
type="text/javascript"></script>  

یا اینکه می توانیم مستقیما لینک آن را درپوشه  پروژه قرار دهیم.

 

<script src="Scripts/jquery-1.10.2.min.js"></script>  
<script src="Scripts/jquery.validate.min.js"></script>

 

در visual studio 2013 defaul template فایل jquery-1.10.2.min.js در پوشه اسکریپت فعال می باشد و تنها کافیست مرجع را به آن اضافه کنید. برای jquery.validate.min.js می توان از لینک CDN استفاده کرد یا اینکه مرجع را با استفاده از NuGet package manage اضافه کنید.

بعد از اضافه شدن موارد گفته شده، نیاز به استفاده از نحو (syntax) زیر برای تعریف قانون در صفحه وب می باشد.

$('#formid').validate( { rules:{ }, messages:{ } } );

با استفاده از این نحو می توانیم صفحه وب را اعتبارسنجی کنیم. formid مربوط به id صفحه می باشد که می خواهیم اعبارسنجی را برای آن انجام دهیم.

برای نوشتن قانون اعتبارسنجی خودمان نیاز به استفاده از فرمت زیر داریم.

rules:   
      {  
          Name_Of_Field1:   
              {  
                  validation_1: param_1,  
                  validation_2: param_2  
              }  
          Name_Of_Field2:   
              {  
                  validation_3: param_3,  
                  validation_4: param_4  
              }                              
      }  

درواقع زمانی که صفحه ASP.NET در مرورگر باز می شود، نام کنترل به معادل HTML آن تبدیل می شود. بنابراین برای دستیابی به نام کنترل در ASP.NET نیاز به استفاده از گزینه های زیر می باشد.

1- Use <%=نام کنترل.ID %>

2- استفاده از ClientIDMode="Static"  در کنترل و استفاده از Id کنترل

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

messages:   
       {  
           Name_Of_Field1:  
               {  
                   validation_1: "message for validation_1",  
                   validation_2: "message for validation_2"  
               }  
           Name_Of_Field2:  
               {  
                   validation_3: "message for validation_3",  
                   validation_4: "message for validation_4"  
               }  
       }  

در این مبحث، اعتبارسنجی های زیر را توضیح خواهیم داد.

1- Required Field validation

2- Regular Expression Validation

3- Range validation

4- Compression Validation

5- Custom Validation

Required Field validation

Required Field validation یکی از رایج ترین validationها برای استفاده در وب فر ها می باشد. اکنون توضیح خواهیم داد که چگونه با استفاده از jQuery  کنترل ASP.NET  مورد نیاز را ایجاد کنیم.
TextBox: برای TextBox موردنظر از کدهای زیر استفاده می کنیم.
 - اضافه کردن اسکریپت جی کوئری و فایل validaion مانند زیر:
<script src="Scripts/jquery-1.10.2.min.js"></script>  
<script src="Scripts/jquery.validate.min.js"></script>  

با کشیدن و انداختن فایل موردنیاز که در پوشه اسکریپت وجود دارد، به صورت خودکار تمام کدهای HTML آن ایجاد خواهد شد.

 - بعد از اضافه کردن لینک از فرمت زیر برای اعتبارسنجی استفاده می کنیم.

<script type ="text/javascript" >          
$(document).ready(function() {    
    $("#form1").validate({                 
             rules: {  
//This section we need to place our custom rule for the control.  
},  
     messages: {  
//This section we need to place our custom validation message for each control.  
  
},  
});              
       });     
         
 </script> 

اکنون در بخش rules باید نام کنترل را به همراه ruleموردنیاز برای اعتبارسنجی وارد کنیم.

برای انجام این کار نیاز به اضافه کردن کدهای زیر می باشد.

//Name of the field.  
<%=IdOfTheTextBox.UniqueID %>:{  
 required:true  
} 

uniqID برای نام کنترل می باشد. ما همچنان می توانیم از Id بعنوان نام کنترل استفاده کنیم. برای آن نیاز است که از ClientIDMode="Static" استفاده کنیم. از Required برای textbox استفاده شده است. کد کامل مانند زیر می باشد:

<script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {  
            $("#form1").validate({  
                rules: {  
                    //This section we need to place our custom rule   
//for the control.  
                    <%=txtName.UniqueID %>:{  
                        required:true  
                    },   
                },  
                messages: {  
                    //This section we need to place our custom   
//validation message for each control.  
                      <%=txtName.UniqueID %>:{  
                          required: "نام را وارد کنید"  
                      },  
                },  
            });  
        });         
    </script>  
    <br />  
   
    نام <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
    <br />  
    <br />  
   <asp:Button ID="btnSubmit" runat="server" Text="ارسال" />   

 

اگر کد بالا را اجرا کنیم، خروجی مانند زیر می باشد. 

 

اگر پیغام موردنظر خود را برای کنترل وارد نکنیم، پیغام "This field is required" نمایش داده می شود. این برای کاربر سردرگم کننده می باشد. بنابراین توصیه می شود پیغام موردنظر برای کنترل نوشته شود.

به طور کلی، تمام پیام خطا باید در رنگ قرمز نمایش داده شود. برای چیزی که خودمان می خواهیم نیاز به اضافه کردن برخی CSS برای آن است.

<style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
</style> 

 

اکنون تمام خطاها با رنگ قرمز نمایش داده می شوند. هر رنگی را می توانید بسته به نیاز خود تغییر دهید.
 

 

DropDownList: برای ایجاد required برای dropdownlist باید validation rule مورد نیا خود را  نوشته و آن  rule را به driopdownlist اضافه کنیم. مثال:

//custom validation rule for Dropdown List  
$.validator.addMethod("CheckDropDownList", function (value, element, param) {  
if (value == '0')  
  return false;  
else  
  return true;  
},"دپارتمان را انتخاب کنید"); 

 

اگر اولین مقدار dropdownlist برابر با 0 نیست، در اینجا می توانید مقدار value==0 را به هرمقداری تغییر دهید. کد کامل را در زیر مشاهده می کنید.

         <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style>  
</head>
<body dir="rtl" style="background: #87cefa">
    <form id="form1" runat="server">
    <div>
    

    <br />  
   
     
    دپارتمان  <asp:DropDownList ID="ddlDept" runat="server">
            <asp:ListItem Value="0">---لیست دپارتمان ها---</asp:ListItem>
            <asp:ListItem>آی تی</asp:ListItem>
            <asp:ListItem>حسابداری</asp:ListItem>
            <asp:ListItem>پشتیبانی</asp:ListItem>
              
                </asp:DropDownList>  
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ورود" /> 
    </div>
    </form>
    <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
</body>
</html>
 <script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {  
            //custom validation rule for Dropdown List  
            $.validator.addMethod("CheckDropDownList", function (value, element, param) {  
                if (value == '0')  
                    return false;  
                else  
                    return true;  
            },"دپارتمان را انتخاب کنید");    
  
            $("#form1").validate({  
                rules: {  
  
                    <%=ddlDept.UniqueID %>:{  
                         CheckDropDownList:true  
                     },  
                },  
                messages: {  
                    //This section we need to place our custom validation message for each control.  
                      
                },  
            });  
        });         
    </script> 

در اینجا dropdown را در زمان اجرا پر می کنیم. وقتی برنامه را اجرا می کنیم می توانیم خروجی را مانند تصویر زیر ببینیم.

 

لیست RadioButton: برای اینکه یک لیست RadioButton را بصورت Required دربیاوریم نیاز به افکت های اضافی نمی باشد. تنها کافیست همان رویه برای textBox را دنبال کنید.

    <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style>  
</head>
<body dir="rtl" style="background-color: #87cefa">
    <form id="form1" runat="server">
    <div>
       
    <br />  
     
    سطح کارمندان   <asp:RadioButtonList ID="rbEmpLevel"  CssClass="radioclass" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem>سطح1</asp:ListItem>
            <asp:ListItem>سطح2</asp:ListItem>
            <asp:ListItem>سطح3</asp:ListItem>
            <asp:ListItem>سطح4</asp:ListItem>
        

                </asp:RadioButtonList>     
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ارسال" /> 
    
    </div>
        <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
    </form>
    <p style="direction: ltr">
        &nbsp;</p>
</body>
</html>
  <script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {       
            $("#form1").validate({  
                rules: {  
  
                    <%=rbEmpLevel.UniqueID %>: {  
                         required: true  
                     },  
                },  
                messages: {  
                    //This section we need to place our custom   
                    //Validation message for each control.  
                    <%=rbEmpLevel.UniqueID %>: {  
                         required: "سطح مهارت را انتخاب کنید."  
                     },  
                },  
            });  
        });         
    </script>

در اینجا نیز مقادیر radiobutton را در زمان اجرا پر می کنیم. زمانی که برنامه را اجرا می کنیم خروجی مانند تصویر زیر خواهد بود:

 

بدون انتخاب هیچ کدام از radiobuttonها وبا زدن دکمه ارسال پیغام برای ما نمایش داده می شود. برای اینکه پیغام بعد از radiobuttonها نمایش داده شود لازم است که از کد زیر بعد از بدنه message نوشته شود.

//Error placement for radio buttons  
errorPlacement: function(error, element)   
{  
  if ( element.is(":radio") )   
  {  
      error.appendTo( element.parents('.radioclass') );  
  }    
else  
  { // This is the default behavior   
    error.insertAfter(element );  
  }  
},

اعتبارسنجی Regular Expression

انجام اضافه کردن اعتبارسنجی regular expression برای jQuery validation بسیار آسان می باشد. تنها کافیست یک تابع مانند تابع زیر برای آن اضافه کنیم:

 //custom rule to check regular expression   
            $.validator.addMethod("match", function(value, element)   
            {  
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);  
            }, "آدرس ایمیل صحیح را وارد کنید");   

 

شما می توانید این regular expression را طبق نیاز خود تغییر دهید. کد کامل این قسمت را در زیر می توانید مشاهده کنید:

    </script>  
     <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style>  
</head>
<body dir="rtl" style="background-color: #87cefa">
    <form id="form1" runat="server">
    <div>
        
    
  
    <br />  
     
    ایمیل   <asp:TextBox ID="txtEmailId" runat="server" CausesValidation="True" ></asp:TextBox>   
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ارسال" />  
    
    </div>
        <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
    </form>
</body>
</html>
    <script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {  
            //custom rule to check regular expression   
            $.validator.addMethod("match", function(value, element)   
            {  
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);  
            }, "آدرس ایمیل صحیح را وارد کنید");   
            $("#form1").validate({                 
                rules: {  
  
                    <%=txtEmailId.UniqueID %>: {  
                         match: true  
                     },  
                },  
                messages: {  
                    //This section we need to place our custom validation message for each control.  
                      
                },  
                 
            });  
        });   
        </script>

وقتی این برنامه را اجرا میکنیم خروجی زیر نمایش داده می شود:

 

 

در اینجا دقت داشته باشید که نیازی به اضافه کردن regularexpression نمی باشد زیرا jQuery  یک rule پیشفرض را فراهم می آورد. تنها کار این است که باید آن rule را فعال کنیم. برای مثال ما از کد قبل استفاده می کنیم. 

email: true

این کد ایمیل را بدون نیاز به regular expression اعتبار سنجی می کند. یک regular expression زمانی که بخواهیم یک طبق سلیقه و نیاز خود یک اعتبارسنجی را انجام دهیم بسیار مفید می باشد.
در همان روش نیز ما می توانیم URL را با استفاده از کدهای زیر اعتبار سنجی کنیم:
url: true // آدرس صحیح را اعتبار سنجی می کند.
digits: true // تنها ورودی عدد را می پذیرد.
date: true // تنها تاریخ در فرمت مناسب را می پذیرد.
 
Range validation
استفاده از rangre validation در جی کوئری بسیارآسان می باشد. jQuery یکسری rule از پیش ساخته برای renge validation دارد. تنها کافیست که ما تنها از آنها استفاده کنیم. در زیر renge validation ها در جی کوئری را مشاهده می کنید.

[range: [20, 25 //  فقط اعداد بین 20 تا 25 را می پذیرد.

minlength: 10 // حداقل طول وردی در textbox برابر 10 می باشد.

maxlength: 20// حداکثر طول 20 می باشد.

[rangelength: [10, 20 // تنها اعداد بین 10 تا 20 کاراکتر را در textbox می پذیرد.

نکته: rengelenghtاعتبار سنجی را در زمانی که textbox خالی می باشد را انجام نمی دهد. 
 
کد کامل این قسمت در زیر آمده است.
 
    <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style> 
</head>
<body dir="rtl" style="background-color: #87cefa">
    <form id="form1" runat="server">
    <div>
        
      
    <br />  
     
    سن   <asp:TextBox ID="txtAge" runat="server" CausesValidation="True" ></asp:TextBox>   
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ارسال" />  
    
    </div>
        <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
    </form>
</body>
</html>
<script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {              
            $("#form1").validate({                 
                rules: {  
                    <%=txtAge.UniqueID %>: {                           
                         range: [10, 20],                           
                     },  
                },  
                messages: {  
                    //This section we need to place our custom validation message for each control.  
                    <%=txtAge.UniqueID %>: {  
                        range: "سن باید بین 10 تا 20 باشد}"  
                    },  
                },                 
            });  
        });         
    </script>

اگر کد را اجرا کنید خروجی زیر دریافت خواهید کرد.

 

Compression Validation

با استفاده از مثال زیر می توانیم compression validation را انجام دهیم.

 <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style>  
</head>
<body dir="rtl" style="background-color:#87cefa">
    <form id="form1" runat="server">
    <div>
        
    
    <br />  
     
      ایمیل                      
    <asp:TextBox ID="txtemailId" runat="server" CausesValidation="True" ></asp:TextBox>   
    <br />  
    تکرار ایمیل     <asp:TextBox ID="txtcid" runat="server" CausesValidation="True" ></asp:TextBox>   
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ورود" />  
    
    </div>
        <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
    </form>
</body>
</html>
 <script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >                
        $(document).ready(function () {              
            $("#form1").validate({                 
                rules: {  
                    <%=txtcid.UniqueID %>: {   
                         required: true,  
                         equalTo: "#<%=txtemailId.ClientID %>" // Id of the control to compare.                         
                     },  
                },  
                messages: {  
                    //This section we need to place our custom validation message for each control.  
                    <%=txtcid.UniqueID %>: {  
                        equalTo: "همان ایمیل را وارد کنید  "  
                    },  
                },                 
            });  
        });         
    </script> 

 

زمانی که برنامه را اجرا می کنیم خروجی زیر را دریافت می کنیم.

 

همچنین می توانیم اعتبارسنجی مقایسه را با استفاده از rule ی که خودمان می سازیم انجام دهیم. همچنین نشان دادیم که چگونه یک rule با جی کوئری را اضافه کنیم.

Custom Validation

ما می توانیم یک  AJAX ساخته و یکسری شرط ها را وایسته به نیاز خود بررسی کنیم. درمثال زیر ما بررسی می کنیم که آیا آدرس ایمیلی که وارد می کنیم وجود دارد یا نه. که اگر وجود داشته باشد باید یک پیغام به کاربر نمایش داده شود و از ارسال داده از به سرور جلوگیری شود. برایانجام این کار از رویه زیر استفاده می کنیم.

مرحله 1: یک webservice ایجاد می کنیم و موجود بودن ایمیل در دیتابیس را بررسی می کنیم.

یک webservice بنام EmployeeService.asmx ایجاد کرده و متد زیر را در آن اضافه می کنیم. 

[WebMethod]
        public bool IsEmailIdAvailable(string emailId)
        {
            bool ret = false;
            try
            {
                using (EmployeeDBEntities db = new EmployeeDBEntities())
                {
                    ret = !db.Employee.Any(x => x.emailId.Equals(emailId));
                }
                return ret;
            }
            catch
            {
                return false;
            }
        }
    }

 

متد بالا ایمیل را در دیتابیس بررسی کرده و اگر وجود داشته باشد مقدار false را برمی گرداند در غیراینصورت مقدار true را بر می گرداند. در اینجا ما از Entity Framework استفاده می کنیم. 

مرحله 2: این webservice را با ویژگی remote در jQuery validation  فراخوانی می کنیم.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomValidation.aspx.cs" Inherits="ValidationWithjQuery.CustomValidation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type ="text/css" >  
        label.error {             
            color: red;   
            display:inline-flex ;                 
        }  
    </style>
</head>
<body dir="rtl" style="background-color: #87cefa">
    <form id="form1" runat="server">
    <div>
          
    <br />  
     آدرس ایمیل:  <asp:TextBox ID="txtemailId" runat="server" CausesValidation="True" ClientIDMode="Static" ></asp:TextBox>   
    <br />  
    <br />  
    <asp:Button ID="btnSubmit" runat="server" Text="ارسال" />  
    
    </div>
        <div>
            <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a>
        </div>
    </form>
</body>
</html>
<script src="Scripts/jquery-1.10.2.min.js"></script>  
    <script src="Scripts/jquery.validate.min.js"></script>    
    <script type ="text/javascript" >          
        $(document).ready(function() {   
            $("#form1").validate({                 
                rules: {                     
                    <%=txtemailId.UniqueID %>: {  
                        required: true,  
                        remote: function () {  
                            return {  
                                url: '<%= ResolveUrl("~/EmployeeServices.asmx/IsEmailIdAvailable") %>', //URL of asmx file.                                 
                                type: "POST",  
                                contentType: "application/json; charset=utf-8",  
                                dataType: "json",  
                                data: JSON.stringify({ emailId: $('#txtemailId').val() }),                                  
                                dataFilter: function (data) {  
                                    var msg = JSON.parse(data);  
                                    if (msg.hasOwnProperty('d'))  
                                        return msg.d;  
                                    else  
                                        return msg;  
                                }  
                            }  
                        }  
                    },                            
                },                                 
                messages: {                      
                    <%=txtemailId.UniqueID %>: {  
                       required: "آدرس ایمیل را وارد کنید",  
                       remote: "این آدرس ایمیل وجود دارد",  
                   },  
                },                             
            });              
        });     
         
    </script>  

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

 

توجه داشته باشید که در این مثال وقتی آدرس ایمیل را وارد می کنیم قبل از زدن دکمه ارسال، اگر ایمیل وجود داشته باشد دیگر عمل postback اتفاق نیفتاده و اطلاعات به سرور ارسال نمی شود.

 

 

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