Question

我的页面上有几个文本框。我正在使用Jquery验证插件进行验证。我在文本框上设置了name属性，我使用该名称来设置规则。当我运行我的页面时，浏览器会重命名我的文本框，并且验证不再起作用。通过不起作用，我的意思是该页面根本没有得到验证。没有错误出现。

以下是我的文本框：

<div class="container1">
  <span class="span150Padded">Last</span>
     <asp:TextBox ID="txtLastName" name="txtLastName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
   <span class="span150Padded">First</span>
      <asp:TextBox ID="txtFirstName" name="txtFirstName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
   <span class="span150Padded">Mid Init, Suffix</span>
      <asp:TextBox ID="txtMidInit" name="txtMidInit" runat="server" CssClass="textBoxSmall"></asp:TextBox>
   <span style="padding-left: 5px">
      <asp:TextBox ID="txtSuffix" name="txtSuffix" runat="server" CssClass="textBoxSmall"></asp:TextBox></span>
</div>

以下是验证码：

 $("form").validate(
  {
      onfocusout: function (element) { jQuery(element).valid(); },

      rules:
    {
        txtLastName:
        {
            isSpecialChar: true,
            maxlength: 13,
            oneOrBothEntered: "txtFacilityName"
        },
        txtFirstName:
        {
            isSpecialChar: true,
            maxlength: 11,
            conditionallyRequired: "txtLastName"
        },
        txtMidInit:
        {
            isSpecialChar: true,
            maxlength: 1
        },
        txtSuffix:
        {
            isSpecialChar: true,
            maxlength: 5
        }
    }
});

这是加载后的渲染页面：

<div class="container1">
                    <span class="span150Padded">Last</span>
                    <input name="ctl00$MainContent$txtLastName" type="text" value="lastname" id="MainContent_txtLastName" class="textBoxMedium" name="txtLastName" />
                </div>
                <div class="container1">
                    <span class="span150Padded">First</span>
                    <input name="ctl00$MainContent$txtFirstName" type="text" value="firstname" id="MainContent_txtFirstName" class="textBoxMedium" name="txtFirstName" />
                </div>
                <div class="container1">
                    <span class="span150Padded">Mid Init, Suffix</span>
                    <input name="ctl00$MainContent$txtMidInit" type="text" value="m." id="MainContent_txtMidInit" class="textBoxSmall" name="txtMidInit" /><span
                        style="padding-left: 5px">
                        <input name="ctl00$MainContent$txtSuffix" type="text" value=" " id="MainContent_txtSuffix" class="textBoxSmall" name="txtSuffix" /></span>
                </div>

我尝试以编程方式重命名文本框，然后验证工作正常。问题是，我的代码后面的代码不再能找到控件了。当我试图在文本框中获取文本时--txtLastName.Text - 我总是得到一个空字符串。

以下是我用来重命名文本框的代码。

function rename() {
var inputs = document.getElementsByTagName("input");
var i;
for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type == "text" || inputs[i].type == "password") {
        indexFirst = inputs[i].name.indexOf('$') + 1;
        indexSecond = inputs[i].name.indexOf('$', indexFirst);
        inputs[i].setAttribute("name", inputs[i].name.substring(indexSecond + 1));
    }
}
}

我不知道这是否有所作为，但我使用的是母版页。

请帮忙。 TIA

Answer 1

为什么不直接使用生成的名称？

您只需在规则对象中引用它们：

$("form").validate(
  {
      onfocusout: function (element) { jQuery(element).valid(); },

      rules:
    {
        'ctl00$MainContent$txtLastName':
        {
             isSpecialChar: true,
          //etc etc

Answer 2

控件的名称取决于它们的父控件，并不总是可以预测它们在运行时的名称。因此，使用控件的UniqueID属性获取其名称始终是个好主意。

$("form").validate({
  onfocusout: function (element) { jQuery(element).valid(); },

  rules:
{
    '<%=txtLastName.UniqueID%>':
    {
        isSpecialChar: true,
        maxlength: 13,
        oneOrBothEntered: "<%=txtFacilityName.UniqueID%>"
    },
    '<%=txtFirstName.UniqueID%>':
    {
        isSpecialChar: true,
        maxlength: 11,
        conditionallyRequired: "<%=txtLastName.UniqueID%>"
    }
}});

Answer 3

您可以在调用rules函数后使用jquery.validate()方法添加规则。像这样

$("form").validate({
  onfocusout: function (element) { jQuery(element).valid(); },
});

$('#<%=txtLastName.ClientID%>').rules('add',
{ isSpecialChar: true,  maxlength: 13, oneOrBothEntered: '<%=txtFacilityName.UniqueID%>'    });

$('#<%=txtFirstName.ClientID%>').rules('add',
{ isSpecialChar: true,  maxlength: 11, conditionallyRequired: '<%=txtLastName.UniqueID%>'});

jquery验证不适用于asp.net控件

3 个答案: