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

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

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

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> 

 

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

 

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

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

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

//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 );  
  }  
},

 //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);  
            }, "آدرس ایمیل صحیح را وارد کنید");   

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

این کد ایمیل را بدون نیاز به 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 اتفاق نیفتاده و اطلاعات به سرور ارسال نمی شود.