asp.net - 使用 asp.net 进行 HTML5 内联验证

Question

正如在 Yahoo 邮件注册中看到的那样，每当一个字段为空时，它都会提示用户该字段为空。我怎样才能做到这一点？

例如我有两个 asp 文本框；名字和姓氏，然后我将名字字段留空并继续姓氏字段，它会提示我将名字字段留空

感谢您的帮助..

Answer 1

您可以为此使用必填字段验证器。例如，如果您有一个要求用户输入名称的文本框，您可以遵循以下语法：

<asp:TextBox runat="server" ID="TxtFirstName" CssClass="textEntry" Width="50%" MaxLength="100" AutoPostBack="false" onkeyup="javascript:shouldsubmit=false;" ValidationGroup="valEnquiry"></asp:TextBox>
                    <font color="red">*</font>
                    <asp:RequiredFieldValidator ID="TxtFirstName_RequiredFieldValidator" runat="server" ErrorMessage="First Name Required" ForeColor="Red" Font-Size="0.9em" ControlToValidate="TxtFirstName" Display="None"></asp:RequiredFieldValidator>

Answer 2

您可以为此使用 javascript.... 举个例子

<script type="text/javascript">
function validateForm() 
{   
    var name=document.getElementById("<%=txtname.ClientID%>").value.trim();
    var contact=document.getElementById("<%=txt_contact_no.ClientID%>").value.trim();   
    var email=document.getElementById("<%=txt_email.ClientID%>").value.trim();
    var comments=document.getElementById("<%=txt_coments.ClientID%>").value.trim();

    if(name=="")
    {
        alert("Name must not be blank... ");
        document.getElementById("<%=txtname.ClientID%>").focus();
        return false;
    }
    if(email=="")
    {
        alert("Email Address must not be blank... ");
        document.getElementById("<%=txt_email.ClientID%>").focus();
        return false;
    }
    if(email != "")
    {
        var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
        var compare=email.match(emailPat);    
        if(compare == null)
        {       
            alert("Invalid Email address ! Please try again!!");
            document.getElementById("<%=txt_email.ClientID %>").value ="";
            document.getElementById("<%=txt_email.ClientID %>").focus();
            return false;
        }

    }
    if(contact=="")
    {
        alert("Contact Number must not be blank...");
        document.getElementById("<%=txt_contact_no.ClientID%>").focus();
        return false;
    }

    if(comments=="")
    {
     alert("Comments must not be blank...");
     document.getElementById("<%=txt_coments.ClientID%>").focus();
     return false;
    }

    if(!isNaN(name))
    {
     alert("Numbers and special Characters are not allowed in Name field...");
     document.getElementById("<%=txtname.ClientID%>").focus();
     return false;
    }
    if(isNaN(contact))
    {
     alert("Only numbers are allowed...");
     document.getElementById("<%=txt_contact_no.ClientID%>").focus();
     return false;
    }

}
function textboxMultilineMaxNumber(txt,maxLen)
{
if(txt.value.length>50)
{
    return false;
}
}
function NumberOnly(txt,value)
    {
       var AsciiValue=event.keyCode
        if((AsciiValue>=48 && AsciiValue<=57) || (AsciiValue==8 || AsciiValue==127))
        {
            if(txt.value.lenghh>10)
            {
             return false;
            }
            event.returnValue=true;
         }
        else
            event.returnValue=false;

    }
 </script>

并将此脚本放在Button的ClientClick上