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

Question

正如在Yahoo mail注册中所看到的，当一个字段被留空时，它将提示用户该字段为空。我如何才能做到这一点？

例如，我有两个asp文本框:名字和姓氏，然后我将名字字段留空，继续处理姓氏字段，系统将提示我将名字字段留空。

谢谢你的帮助。。

​

Answer 1

为此，您可以使用Required Field Validators。例如，如果您有一个文本框要求用户输入某个名称，则可以遵循以下语法：

<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>

并将此脚本的onClientClick