Validation of basic field types in a user profile form

来源：互联网发布：2016北京旅游数据编辑：程序博客网时间：2024/04/20 09:19

<head runat="server">
    <title></title>
    <style type="text/css">
        .errorContainer
        {
            display: none;
        }
        .alertMsg
        {
            margin-left: 20px;
            color: #660000;
        }
        .input-heightlight
        {
            background-color: #CCCCCC;
        }
        .mandatory
        {
            color: Red;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.validator.setDefaults({
                highlight: function (input) { $(input).addClass("input-heightlight"); },
                unhighlight: function (input) { $(input).removeClass("input-heightlight"); }
            });
            var validator = $('#form1').validate({
                rules: { txtName: "required",
                    txtEmail: { required: true, email: true },
                    txtPassword: { required: true, minlength: 8 },
                    txtConfirmPwd: { required: true, minlength: 8, equalTo: '#txtPassword' },
                    txtDOB: { required: true, date: true },
                    txtAddress1: { required: true, maxlength: 100 },
                    txtAddress2: { maxlength: 100 },
                    txtPostCode: { required: true, digits: true },
                    txtWebSite: { url: true },
                    chkAccept: { required: true }
                },
                messages: { txtName: "please enter your name",
                    txtEmail: { required: "Please enter your Email", email: "Please enter a valid email address" },
                    txtPassword: { required: "Please enter your Password", minlength: "Password should be at least 8 characters long" },
                    txtConfirmPwd: { required: "Please reenter your Password to confirm", minlength: "The Confirm Password should be at least 8 characters long", equalTo: "The entered password and confirm password should match" },
                    txtDOB: { required: "Please enter your Date of Birth", date: "Please enter a valid date" },
                    txtAddress1: { required: "Please enter your Mailing Address", maxlength: "Address can be upto maximum 100 characters" },
                    txtAddress2: { maxlength: "Address can be upto maximum 100 characters" },
                    txtPostCode: { required: "Please enter the Postal Code", digits: "Please enter a valid postal code" },
                    txtWebSite: { url: "Please enter a valid URL" },
                    chkAccept: { required: "Please accept the Terms & Conditions to proceed" }
                },
                wrapper: "li",
                errorContainer: $('div.errorContainer'),
                errorLabelContainer: $('#form1 p.alertMsg')
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblEmail" runat="server" Text="Email:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblPassword" runat="server" Text="Password:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblConfirmPwd" runat="server" Text="Confirm Password:"></asp:Label><span
                        class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtConfirmPwd" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblDOB" runat="server" Text="Date of birth:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblAddress1" runat="server" Text="Address1:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblAddress2" runat="server" Text="Address2:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblPostCode" runat="server" Text="Post Code:"></asp:Label><span class="mandatory">*</span>
                </td>
                <td>
                    <asp:TextBox ID="txtPostCode" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblWebSite" runat="server" Text="Web Site:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtWebSite" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:CheckBox ID="chkAccept" runat="server" Text="I accept the Terms and Conditions" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                    <asp:Button ID="btnReset" runat="server" Text="Reset" />
                </td>
            </tr>
        </table>
    </div>
    <div class="errorContainer">
        <p class="alertMsg">
            There was an error processing your request. Please correct the following to proceed:</p>
    </div>
    </form>
</body>
</html>