javascript - 使用 JavaScript 和 ASP.NET 设置或添加/删除 css 属性时闪烁

Question

我正在尝试做一些不同的、更干净的事情，但遇到了困难。 我是 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" />

这是新领域:我哪里出错了？

谢谢!

Answer 1

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

回发仍在进行，因此该段落再次隐藏。

<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