اعتبارسنجی کنترل ها توسط jquery در asp.net

در این مقاله میخواهیم با به کارگیری jquery مقادیر ورودی کاربر رو چک کنیم (اعتبارسنجی کنترل توسط jquery در asp.net)

اعتبارسنجی کنترل ها توسط jquery در asp.net

در ابتدا دو فایل jQuery.js و jQuery.validate.js را به پروژه خود اضافه کنید سپس باید این دو فایل را به صفحه خود در بخش head رفرنس بدیم:

<head runat="server">

    <title></title>

    <script src="jquery.js"></script>

    <script src="jquery.validate.js"></script>

</head>

سپس به صفحه خود کنترل های خود را اضافه میکنیم:

<div>

      <span>First Name</span>

      <asp:TextBox Id="name" runat="server" ></asp:TextBox>

   </div>

   <div>

      <span >E-Mail ID</span>

      <asp:TextBox Id="email" runat="server" ></asp:TextBox>

   </div>        

        <div >

            <span >Mobile Number</span>

            <asp:TextBox Id="field" runat="server" MaxLength="10" ></asp:TextBox>

        </div>

        <div>   

            <asp:Button runat="server" Text="submit" />

   </div>

حالا برای سنجش مقادیر ورودی یک تابع در بخش head اضافه میکنیم:

<script>

        $(document).ready(function() {

            $("#form1").validate({

                rules: {

                    <%=name.UniqueID %>:{

                        required:true

                    },

                    <%=email.UniqueID %>: {

                        required: true,

                        email: true

                    },

                     <%=field.UniqueID %>: {

                        required: true,

                        digits:true

                    }

                }

            });

        });

    </script>

حالا میتونید برنامه رو اجرا کنید و خروجی زیر را ببینید:

اگر بخواهیم که متن دلخواه خود رانشان دهیم کافی است که کد زیر را به تابع خود اضافه کنیم:

messages: {

    <%=name.UniqueID %>:{

       required: "* Required Field *"

     }

 }

پس صفحه aspx به شکل زیر خواهد شد:



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="jquery.js"></script>

    <script src="jquery.validate.js"></script>

    <script>

        $(document).ready(function() {

            $("#form1").validate({

                rules: {

                    <%=name.UniqueID %>:{

                        required:true

                    },

                    <%=email.UniqueID %>: {

                        required: true,

                        email: true

                    },

                     <%=field.UniqueID %>: {

                        required: true,

                        digits:true

                    }

                }, messages: {

                    <%=name.UniqueID %>:{

                        required: "* Required Field *"

                    }

                }

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

   <div>

      <span>First Name</span>

      <asp:TextBox Id="name" runat="server" ></asp:TextBox>

   </div>

   <div>

      <span >E-Mail ID</span>

      <asp:TextBox Id="email" runat="server" ></asp:TextBox>

   </div>        

        <div >

            <span >Mobile Number</span>

            <asp:TextBox Id="field" runat="server" MaxLength="10" ></asp:TextBox>

        </div>

        <div>   

            <asp:Button runat="server" Text="submit" />

   </div>

    </form>

</body>

</html>

 

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