如何在相关文本框中显示必填字段验证程序错误消息？

Question

我在文本框上有一个文本框，我正在使用必需的字段验证。 如果文本框是空的，那么我想在文本框中显示“请输入一些文本”，如果有东西在文本框中，那么我想检查文本框文本是否有效的电子邮件ID或不，如果不是那么我想显示文本框里面的“请输入有效的电子邮件ID”

Answer 1

您可以使用jQuery执行以下操作：

<script type="text/javascript"> 

function CheckEmail() 
{ 
    var $email = $("#<%=EmailText.ClientID %>"); 

    if ($email.val().length) { 
     if (!IsEmailValid($email.val())) 
      $email.val("Please enter a valid email address"); 
    } 
    else { 
     $email.val("Please enter some text."); 
    } 
}  

function IsEmailValid(inputvalue) 
{ 
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/; 

    if(pattern.test(inputvalue)) { 
     return true; 
    } 
    else { 
     return false; 
    } 
} 

</script> 

<asp:TextBox ID="EmailText" Text="Please enter some text" runat="server" /> 
<asp:Button ID="SubmitButton" runat="server" OnClientClick="CheckEmail()" /> 

或者您可以使用开箱即用的RequiredFieldValidator和RegularExpressionValidator进行.NET验证。

编辑

由于海报已表示客户端脚本不能用于验证，我已经添加了服务器端验证：

protected void SubmitButton_Click(object sender, EventArgs e) 
{ 
     if (IsFormValid()) 
     { 
     //Do something... 
    } 

} 

private bool IsFormValid() 
{ 
    bool isValid = true; 

    if (String.IsNullOrEmpty(EmailText.Text)) 
    { 
     EmailText.Text = "Please enter an email address"; 
     isValid = false; 
    } 
    else 
    { 
     if (!Regex.IsMatch(EmailAddress.Text, @"/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/")) 
     { 
      EmailText.Text = "Email address not valid"; 
      isValid = false;  
     } 

    } 

    return isValid; 
} 

Answer 2

您可以使用一个占位符

<input type="text" placeholder="Please enter some text"> 

我相信你确实需要一个jQuery插件在Internet Explorer中工作。

但我不明白为什么它应更改为“请输入有效的电子邮件ID”

你可以把它说“请输入有效电子邮件ID”在一开始，并添加一个验证脚本，以便人们可以输入无效的电子邮件。

function validateForm() 

{ 
var x=document.forms["MyForm"]["email"].value; 
var atpos=x.indexOf("@"); 
var dotpos=x.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
    alert("Not a valid email id"); 
    return false; 
    } 
} 

Answer 3

可以使用reqiredfieldvalidator检查，如果文本框为空或不

<asp:RequiredFieldValidator ID="RequiredFieldValidator" runat="server" ControlToValidate="yourTextBox" Text="This field is required" /> 

，并检查电子邮件验证您可以使用的RegularExpressionValidator验证电子邮件的输入

<asp:RegularExpressionValidator runat="server" ID="emailValidator" ControlToValidate="emailTextBox" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Text="please enter a valid email address" /> 

Answer 4

请使用此示例：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1" runat="server" ErrorMessage="Please enter some text"></asp:RequiredFieldValidator> 
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="TextBox1" 
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
    runat="server" ErrorMessage="Please enter valid emailid"></asp:RegularExpressionValidator> 

RequiredFieldValidator验证空文本框，然后RegularExpressionValidator匹配ValidationExpression，在这种情况下它是emailid。

Answer 5

空文本验证使用RequiredFieldValidator的默认功能：

<asp:RequiredFieldValidator runat="server" ID="requiredValidatorId" ControlToValidate="textBoxId" ErrorMessage="Please enter some text" /> 

而对于输入格式或域验证使用服务器端的逻辑是这样的：

if (!IsValidEmail(email)) 
{ 
    zoneRequiredValidatorId.Text = "Please enter valid email id"; 
    zoneRequiredValidatorId.IsValid = false; 
} 
else 
if (...) 
{ 
    zoneRequiredValidatorId.Text = "Validation error X"; 
    zoneRequiredValidatorId.IsValid = false; 
} 
... 

请注意，我们在这里设置IsValid属性假。