Javascript 使用jquery验证文本框

我的aspx页面中有几个asp文本框。并且没有足够的空间显示所需的字段验证程序消息。有什么解决办法吗？使用jquery还是其他什么

您可以简单地用

红色

边框突出显示文本框，以标记它们与文本框数据有关

您可以像这样使用CSS：

input.error  
{ 
   background: Yellow; border: 1px solid red; 
}

出现错误时，只需将类添加到

输入

，并输入工具提示

$("input").addClass("error").attr('title', 'An error occurred!');

---

您可以简单地用

红色

边框突出显示文本框，以标记它们与文本框数据有关

您可以像这样使用CSS：

input.error  
{ 
   background: Yellow; border: 1px solid red; 
}

出现错误时，只需将类添加到

输入

，并输入工具提示

$("input").addClass("error").attr('title', 'An error occurred!');

请尝试以下代码：

$(":text").each(function(){
    if($(this).val()==""){
    $(this).css("background-color","red");
    alert($(this).attr("id") & " validate error");  
    return
    }

});

请尝试以下代码：

$(":text").each(function(){
    if($(this).val()==""){
    $(this).css("background-color","red");
    alert($(this).attr("id") & " validate error");  
    return
    }

});

---

通过验证数据，您可以同时使用javascript或jQuery，然后在未验证的情况下将消息返回到输入。 例：

---

您也可以添加样式来警告您的用户

通过验证数据，您可以同时使用javascript或jQuery，如果未验证，则将消息返回到输入。 例：

您也可以添加样式来警告您的用户

您也可以使用自己的验证器和彩色文本或文本框。 我的页面上有一个小例子，你可以修改它。添加css类： 并删除css类

当然，首先需要像这样验证它：if（“#yourInputId”）.val（“”）； 只需在添加或删除css类时对文本进行着色即可。

另外，为了提醒（），您可以使用自己的验证程序对文本或文本框进行着色。 我的页面上有一个小例子，你可以修改它。添加css类： 并删除css类

当然，首先需要像这样验证它：if（“#yourInputId”）.val（“”）；

---

只要在添加或删除css类时为文本上色即可。

您可以阅读本文：让他们尝试以下代码：

<script type="text/javascript">
    <script src="JavaScript/jquery.js" type="text/javascript"></script>
   function callOnload()
   {
      $("input[isvalidate=true]").each(
                              function(n)
                              {
                                 $('#' +this.id).addClass('mandatory');
                                 this.onkeyup=function()
                                 {
                                    if(this.value==='')
                                    {
                                       $('#' +this.id).removeClass('normal');
                                       $('#' +this.id).addClass('mandatory');
                                    }
                                    else
                                    {
                                       $('#' +this.id).removeClass('mandatory');
                                       $('#' +this.id).addClass('normal');
                                    }
                                 }
                              }
                        );

         $("#btnSubmit").click(
                              function()
                              {
                                  $("input[isvalidate=true]").each(
                                  function(n)
                                  {
                                     if(this.value==='')
                                     {
                                        alert($('#' +this.id).attr('errprMsg'));
                                     }
                                  }
                                 );
                                return false;
                              }
                           );
   }
   $(document).ready(callOnload);
</script>

函数callOnload（）
{
$（“输入[isvalidate=true]”）。每个(
函数（n）
{
$（'#'+this.id）.addClass（'mandatory'）；
this.onkeyup=函数（）
{
if（this.value==''）
{
$（'#'+this.id）.removeClass（'normal'）；
$（'#'+this.id）.addClass（'mandatory'）；
}
其他的
{
$（'#'+this.id）.removeClass（'mandatory'）；
$（'#'+this.id）.addClass（'normal'）；
}
}
}
);
$（“#btnsupmit”）。单击(
函数（）
{
$（“输入[isvalidate=true]”）。每个(
函数（n）
{
if（this.value==''）
{
警报（$（'#'+this.id）.attr（'errprMsg'）；
}
}
);
返回false；
}
);
}
$（文档）.ready（callOnload）；

您可以阅读这篇文章：让他们尝试以下代码：

<script type="text/javascript">
    <script src="JavaScript/jquery.js" type="text/javascript"></script>
   function callOnload()
   {
      $("input[isvalidate=true]").each(
                              function(n)
                              {
                                 $('#' +this.id).addClass('mandatory');
                                 this.onkeyup=function()
                                 {
                                    if(this.value==='')
                                    {
                                       $('#' +this.id).removeClass('normal');
                                       $('#' +this.id).addClass('mandatory');
                                    }
                                    else
                                    {
                                       $('#' +this.id).removeClass('mandatory');
                                       $('#' +this.id).addClass('normal');
                                    }
                                 }
                              }
                        );

         $("#btnSubmit").click(
                              function()
                              {
                                  $("input[isvalidate=true]").each(
                                  function(n)
                                  {
                                     if(this.value==='')
                                     {
                                        alert($('#' +this.id).attr('errprMsg'));
                                     }
                                  }
                                 );
                                return false;
                              }
                           );
   }
   $(document).ready(callOnload);
</script>

函数callOnload（）
{
$（“输入[isvalidate=true]”）。每个(
函数（n）
{
$（'#'+this.id）.addClass（'mandatory'）；
this.onkeyup=函数（）
{
if（this.value==''）
{
$（'#'+this.id）.removeClass（'normal'）；
$（'#'+this.id）.addClass（'mandatory'）；
}
其他的
{
$（'#'+this.id）.removeClass（'mandatory'）；
$（'#'+this.id）.addClass（'normal'）；
}
}
}
);
$（“#btnsupmit”）。单击(
函数（）
{
$（“输入[isvalidate=true]”）。每个(
函数（n）
{
if（this.value==''）
{
警报（$（'#'+this.id）.attr（'errprMsg'）；
}
}
);
返回false；
}
);
}
$（文档）.ready（callOnload）；

是的，显然，您有一个非常简单的解决方案

您不必使用任何jquery内容。您只需使用

asp:validationSummary

我在这里发布解决方案。通过使用标准asp

验证控件，您可以在简单的弹出窗口中显示所有错误消息。它不会占用
页面上的任何空间

查看下面的代码：

<asp:ValidationSummary ID="validation1" runat="server" ShowMessageBox="true"  ShowSummary="false" DisplayMode="SingleParagraph" ValidationGroup="abc" />

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

<asp:RequiredFieldValidator ID="req" runat="server" ControlToValidate="txtAge" Display="None" ValidationGroup="abc" ErrorMessage="Field Required"></asp:RequiredFieldValidator>

 <asp:Button ID="btn" Text="click"  runat="server" ValidationGroup="abc" />



在这里，我在验证摘要中设置了
ShowMessageBox=“true”
，它将在弹出窗口中显示所有错误消息

设置验证器
Display=“none”
，使错误消息仅显示在弹出窗口中

错误消息将如下所示