0

我正在尝试做一些不同且更清洁的事情，但会碰到砖墙。我是 ASP.NET（无 MVC）的新手。

我有一个包含错误消息的 HTML 段落标记，我还添加了服务器控件或属性，以便我可以使用服务器端验证显示/隐藏。

我通常将标签包装在一个列表中，以便准确对齐表单元素。段落的默认样式设置为display: none,在页面加载时隐藏整个段落，因此没有 DOM 延迟。

如果用户点击提交按钮时出现错误，则样式将替换为另一种样式，该样式将其设置为：display: block;

当我单击按钮时，错误消息会显示，但会像闪烁一样迅速消失：

代码如下所示：

<%-- USER NAME ERROR --%>
<li>
<p class="default" runat="server" id="lstUserNameErrorMsg">
<span>Invalid Username:</span>
Numbers, uppercase/lower case letters only. No special characters
</p>

<%-- USERNAME TEXTBOX --%>
<asp:TextBox ID="txtUserName" runat="server" MaxLength="16" TabIndex="4">
</asp:TextBox>
<label runat="server" id="lblUserName" for="txtUserName">* Username</label>
</li>

这是JavaScript：（此代码是暂定的）

<script type="text/javascript">
 function validateForm() {
  var element = document.forms["membership"];
  var userNameFlg = document.getElementById("lstUserNameErrorMsg");

  var isLetters = /^[A-Za-z]+$/;

  if (element.txtUserName.value.match(isLetters) && 
element.txtUserName.value.length >= 2) {

   userNameFlg.setAttribute("class", "default");
  }
  else {
   userNameFlg.setAttribute("class", "failed");
  }
  return false;
 }
</script>


<asp:Button ID="btnSubmit" runat="server" Text="Create Accounte" 
OnClick="btnSubmit_Click" OnClientClick="validateForm()" TabIndex="11" />

这是新领域：我哪里错了？

谢谢！

4

1 回答 1

2

return在方法调用之前添加validateForm().

回发仍在发生，因此该段落再次被隐藏。

<asp:Button ID="btnSubmit" runat="server" Text="Create Accounte" 
OnClick="btnSubmit_Click" OnClientClick="return validateForm()" TabIndex="11" />

编辑：

在你的函数中，你总是返回 false。所以回发总是会失败。像这样改变它：

function validateForm() {
            var userNameFlg = document.getElementById("lstUserNameErrorMsg");
            var txtBox = document.getElementById("txtUserName");
            var isLetters = /^[A-Za-z0-9]+$/;

            if (txtBox.value != null && txtBox.value.match(isLetters) && txtBox.value.length >= 2) {
                userNameFlg.setAttribute("class", "default");
                return true;
            }
            else {
                userNameFlg.setAttribute("class", "failed");
                return false;
            }
        }

另外，由于您刚刚开始，我建议您查看jquery。您也可以通过使用 Asp.Net 验证控件来实现这一点。参考MSDN

于 2013-06-16T19:03:42.067 回答