如何为 Javascript 错误消息提供 CSS答案

【问题标题】：How can give CSS for Javascript Error Message如何为 Javascript 错误消息提供 CSS
【发布时间】：2014-03-06 12:55:45
【问题描述】：

这里是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";}


}

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

只是改变

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

到

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

用颜色设置为红色的 span 包裹文本？

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

每当您打印错误消息时，您都可以将其包装在带有类的div 或error-message 中

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

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

.error-message
{
    color: red;
}

【讨论】：

【解决方案4】：

我会推荐：

css:

.error {
  color: red;
}

和：

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

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

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

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

它最适合作为跨设备使用，并且它使用正则表达式构建错误处理，因此您可以使用那些讨厌的 javascript 代码:) 阅读更多：

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

【讨论】：

【解决方案5】：

朋友试试这个代码..我使用了 jquery css 方法，这使得解决方案变得非常容易。你不需要为消息创建类和 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/

【讨论】：

寻求帮助....我已经得到了答案。而且我不想为所有消息着色。只有单一的信息我需要给颜色
@Deekey 你可以设置任何属性，不仅是颜色。我已经采取了粗体和颜色。你可以采取任何属性。