javascript - 根据发现的错误显示不同的 Bootstrap 警报消息？

Question

我不太确定如何举例说明这个，但这里是!

我想将警报消息添加到我正在创建的网站中。示例可以在这里找到:

Examples of Alert Messages

根据来自表单的输入，我想显示不同的消息。所以 php 检查正确的输入和选择的字段。

消息示例:

1) Alert Danger - 密码长度必须在 6 到 16 个字符之间，包括字母和数字

2) 警报警告 - 更新您的个人资料。

我希望所有这些消息都显示在同一个 div 标记中 - message-warning-display。

<div class="message-warning-display" display:"hide">
      <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> There was a problem with your network connection.
      </div>
</div>

我想这与 php 调用特定的 JavaScript 函数有关，该函数被调用然后显示消息/将显示设置为显示而不是隐藏。

Answer 1

一种方法是这样的:

将此添加到您的 HTML 中:

<div id="alert" class="message-danger-display" style="display:none">
      <div class="alert alert-warning">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p></p>
     </div>
 </div>

你的 JQUERY 部分

$('YOUR FORM').submit(function(e){
     $('#alert').attr('style','display:none');  
     $('#alert .alert p').html();      
     if('YOUR_DANGER_ALERT_CONDITION'){
           var msg = '<strong>Error!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-danger-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }else if('YOUR_WARNING_ALERT_CONDITION'){
           var msg = '<strong>Warning!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-warning-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }
});