Question

以下是 Demo

我正在使用 Javascript 验证。我想为文本分别给出颜色 “请输入有效的电子邮件ID”

当用户输入wrong email id并按，时会出现一条错误消息。我想为此错误消息提供红色。仅对于此错误消息，我需要红色

HTML

<label id="message">We don't Spam. Promise</label> <br />
<input autocomplete="on" type="text"  name="booking_email" onkeyup="validate()"   id="SignupText" class="InputSignup" placeholder="Enter Your Email" /> 
<input type="submit" value="submit" class="subButton"  onclick="submitEmail();"/>

JAVASCRIPT

function validate()
{
var booking_email = $('input[name=booking_email]').val();

if(booking_email == '' ){
  document.getElementById("message").innerHTML="We don't Spam. Promise";
}else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )
{
  document.getElementById("message").innerHTML="Your email is valid"
  if(event.which == 13){
    submitEmail();
  }
} else {
  document.getElementById("message").innerHTML="Type your email id";

  if(event.which == 13){
    submitEmail();
  }
}
}
function submitEmail()
{
var booking_email = $('input[name=booking_email]').val();
if(booking_email=="")
{

document.getElementById("message").innerHTML="Please enter Your Email ID"
}
else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )

{
alert('success');

}

else {document.getElementById("message").innerHTML="Please enter Valid Email ID";}


}

Answer 1

只需更改

document.getElementById("message").innerHTML="Please enter Your Email ID"

到

document.getElementById("message").innerHTML = "<span style='color:red'>Please enter Your Email ID</span>";

使用颜色设置为红色的范围包装文本？

Answer 2

我创建了 JSFiddle

我在文本周围包裹了<span class='red'></span>，然后在css中创建了一个类.red。

使用Javascript：

document.getElementById("message").innerHTML = "<span class='red'>Please enter Your Email ID</span>";

CSS

.red{
    color:red;
}

Answer 3

每当您打印错误消息时，您都可以将其包含在div的课程中，或error-message

  document.getElementById("message").innerHTML="<div class='error-message'>Please enter Valid Email ID</div>";

然后在你的CSS文件中你可以做

.error-message
{
    color: red;
}

Answer 4

我建议：

的CSS：

.error {
  color: red;
}

和

document.getElementById("message").innerHTML = "<span class='error'>Please enter Your Email ID</span>";

其他选项是为您的错误保留单独的div，并相应地更改其可见性和/或文本。

但是，最终的解决方案就是使用正确的输入类型。

<input type="email" name="email">

它最适合作为跨设备，它使用regexp进行错误处理，所以你可以使用那些令人讨厌的javascript代码逃脱:)阅读更多：

http://html5doctor.com/html5-forms-input-types/

Answer 5

朋友试试这段代码..我使用了jquery css方法，这使得解决方案变得更加容易。你不需要为message创建class和div。你只需要按照下面的代码。我使用了jquery css方法，我只在成功消息中使用它，但你可以将它用于所有。只需遵循语法。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function validate()
{
var booking_email = $('input[name=booking_email]').val();

if(booking_email == '' ){
  document.getElementById("message").innerHTML="We don't Spam. Promise";
}else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )
{
  document.getElementById("message").innerHTML="Your email is valid"
 $('#message').css("color","red");
  $('#message').css("font-weight","bold");

  if(event.which == 13){
    submitEmail();
  }
} else {
  document.getElementById("message").innerHTML="Type your email id";

  if(event.which == 13){
    submitEmail();
  }
}
}
function submitEmail()
{
var booking_email = $('input[name=booking_email]').val();
if(booking_email=="")
{

document.getElementById("message").innerHTML="Please enter Your Email ID"
}
else if( /(.+)@(.+){1,}\.(.+){2,}/.test(booking_email) )

{
alert('success');

}

else {document.getElementById("message").innerHTML="Please enter Valid Email ID";}


}

</script>
</head>
<body>
<label id="message">We don't Spam. Promise</label> <br />
<input autocomplete="on" type="text"  name="booking_email" onkeyup="validate()"   id="SignupText" class="InputSignup" placeholder="Enter Your Email" /> 
<input type="submit" value="submit" class="subButton"  onclick="submitEmail();"/>
</body>
</html>

这是演示

http://jsfiddle.net/JHHTw/3/

如何为Javascript错误消息提供CSS

5 个答案: