Question

我有2个文本框，2个复选框和2个标签。

第一个文本框，复选框和标签彼此相关，其余部分相同。

textbox应该接受基于jquery验证插件的有效电话号码，当chackbox检查验证规则会发生变化时，在两个选项中，错误消息都会显示在标签内。

对于一个文本框我没有问题，但是当我添加第二个文本框时会出现问题，只有第二个文本框才会进行验证。

请查看我的代码和建议。

 <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="js/jquery.validate.js" type="text/javascript"></script>




 <script  type="text/javascript">
        var RegularExpression;
        var USAPhone = /^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$/;
        var InterPhone = /^\d{9,12}$/;
        var errmsg;


        function ValidPhoneHome(sender) {


            if (sender.checked == true) {
                RegularExpression = InterPhone;
                errmsg = "Enter 9 to 12 numbers as international number";

            }
            else {

                RegularExpression = USAPhone;
                errmsg = "Enter a valid number";

            }


            jQuery.validator.addMethod("phonehome", function(value, element) {
                return this.optional(element) || RegularExpression.test(value);
            }, errmsg);
        }


        function ValidMobileHome(sender) {


            if (sender.checked == true) {
                RegularExpression = InterPhone;
                errmsg = "Enter 9 to 12 numbers as international number";

            }
            else {

                RegularExpression = USAPhone;
                errmsg = "Enter a valid number";

            }


            jQuery.validator.addMethod("mobilephone", function(value, element) {
                return this.optional(element) || RegularExpression.test(value);
            }, errmsg);
        }


$(document).ready(function() {

        ValidPhoneHome("#<%= chkIntphoneHome%>");
        ValidMobileHome("#<%= chkIntMobileHome%>");


            $("#aspnetForm").validate({

                rules: {
                    "<%=txtHomePhone.UniqueID %>": {

                    phonehome: true

                    }
                }
               , errorLabelContainer: "#lblHomePhone",


                 rules: {
                    "<%=txtMobileHome.UniqueID %>": {

                    mobilephone: true

                    }
                }
                , errorLabelContainer: "#lblMobileHome"
                })

</script>

<asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" onclick="ValidPhoneHome(this)" >

<asp:TextBox ID="txtHomePhone" runat="server" ></asp:TextBox>

<label id="lblHomePhone"></label>


<asp:CheckBox ID="chkIntMobileHome" runat="server" Text="Internation Code" onclick="ValidMobileHome(this)" />

<asp:TextBox ID="txtMobileHome" runat="server"></asp:TextBox>

<label id="lblMobileHome"></label>

Answer 1

这是正确的代码：

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="js/jquery.validate.js" type="text/javascript"></script>


    <script src="js/js.js" type="text/javascript"></script>

 <script  type="text/javascript">

     $(document).ready(function() {

         ValidPhoneHome("#<%= chkIntphoneHome%>");
         ValidMobileHome("#<%= chkIntMobileHome%>");


         $("#aspnetForm").validate({

             rules: {
                 "<%=txtHomePhone.UniqueID %>": {

                     phonehome: true
                 },
                 "<%=txtMobileHome.UniqueID %>": {

                     mobilephone: true

                 }
             },




               errorElement: "mydiv",
                wrapper: "mydiv",  // a wrapper around the error message

                  errorPlacement: function(error, element) {
                  offset = element.offset();
                  error.insertBefore(element)
                  error.addClass('message');  // add a class to the wrapper
                  error.css('position', 'absolute');
                  error.css('left', offset.left + element.outerWidth());
                  error.css('top', offset.top - (element.height() / 2));

              }



        });
    });

</script>

  <div id="mydiv">


               <asp:CheckBox ID="chkIntphoneHome" runat="server" Text="Internation Code" Style="position: absolute;
                    top: 113px; left: 549px;" onclick="ValidPhoneHome(this)" 
                     />

                <asp:TextBox ID="txtHomePhone" runat="server" Style="top: 147px; left: 543px; position: absolute;
                    height: 22px; width: 128px" ></asp:TextBox>

                    <cc1:FilteredTextBoxExtender ID="txtHomePhone_FTBE" runat="server" 
                    Enabled="True" FilterType="Numbers" TargetControlID="txtHomePhone">
                </cc1:FilteredTextBoxExtender>

                    <label id="lblHomePhone" 
                    style="position:absolute; top: 175px; left: 451px; width: 351px;"></label>


              <asp:CheckBox ID="chkIntMobileHome" runat="server" Style="position: absolute; top: 200px;
                    left: 535px;" Text="Internation Code" onclick="ValidMobileHome(this)" />
                <asp:TextBox ID="txtMobileHome" runat="server" Style="top: 231px; left: 555px; position: absolute;
                    height: 22px; width: 128px"></asp:TextBox>
                    <cc1:FilteredTextBoxExtender ID="txtMobileHome_FilteredTextBoxExtender" 
                    runat="server" Enabled="True" FilterType="Numbers" 
                    TargetControlID="txtMobileHome">
                </cc1:FilteredTextBoxExtender>
                    <label id="lblMobileHome" style="top: 254px; left: 449px; position: absolute;
                    height: 17px; width: 345px"></label>


                    <asp:CheckBox ID="chkIntFaxHome" runat="server" Style="position: absolute; top: 274px;
                    left: 567px;" Text="Internation Code" onclick="ValidFaxHome(this)"
                     />
                <asp:TextBox ID="txtFaxHome" runat="server" Style="top: 294px; left: 569px; position: absolute;
                    height: 22px; width: 128px"></asp:TextBox>
                    <label id="lblFaxHome" style="top: 321px; left: 483px; position: absolute;
                    height: 22px; width: 294px"></label>


                <cc1:FilteredTextBoxExtender ID="txtFaxHome_FilteredTextBoxExtender" 
                    runat="server" Enabled="True" FilterType="Numbers" TargetControlID="txtFaxHome">
                </cc1:FilteredTextBoxExtender>


               </div>

asp.net与jQuery验证问题

1 个答案: