Question

我现在有一个脚本可以防止用户在表单的州字段中输入除状态缩写之外的任何内容。感谢gideon

我稍微修改了脚本，以便在输入无效状态时包含警报消息。但我真的不喜欢它。我要去一个警告栏，它在页面顶部闪烁，或者可能在场地下方闪烁。输入错误缩写时会自动显示的内容，闪光灯会吸引用户注意并在几秒钟后消失。欢迎任何想法或想法！我非常乐意接受建议！再次感谢！

我开始认为你的家伙不理解我。这是我的代码：

<script>
                        function validateState(el) {
                        //put all states in this array. 
                        var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
                    "FL","GA","GU","HI","IA",
                    "ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
                    "NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
                    "SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
                        for(var i=0;i< states.length;i++) {
                          if(el.value.toUpperCase() == states[i]) {
                            return true;
                          }
                        }
                        //clear element if it doesn't match a state
                        el.value = ""; //you could maybe do something else here.
                        alert('Invalid State Abbreviation, You must fix this before continuing')
                        document.getElementById("state").focus();
                        return false;
                    }
                    </script>

如果语句返回false，我想在屏幕上运行一个小节。

Answer 1

您可以简单地创建一个位于用户视图上方的元素（顶部：-100px等）。一旦输入了无效状态，您就可以使用像jQuery这样的库将其设置为顶部位置0.您可以使用setInterval（）中的简单条件语句使其闪烁;

我不确定你是否想要使用jQuery，但如果你这样做，那么你的代码看起来像这样：

//if the input is not what you expect..
if(input != state){
    //drop the bar down
    $("#bar").animate({
            top: 0
    }, 1500);//drop it in 1500 milliseconds.
    //this is a lot like a loop that runs every 400 milliseconds.. 
    setInterval(function () {  <-------------------------------| 
        if ($("#bar").css("display") == 'none') {              |
            //if the bar is HIDDEN show it..                   |
            $("#bar").show();                                  |  
        } else {                                               | 
            //else hide it.                                    | 
            $("#bar").hide();                                  |
        }                                                      |
    }, 400);//<< EVERY 400 milli-seconds go here >-------------^
}

当然这只是一个例子，可以很容易地转换回传统的JavaScript。

查看jsFiddle。

我希望这就是你要找的东西。

Answer 2

调整@ Shawn的代码，你需要一个显示条形和隐藏条形的功能，我删除了使条形图闪烁的代码：

function ShowError(txt)
{
  $("#bar").show();
  $("#bar").text(txt);
  $("#bar").animate({
      top: 0
  }, 1500);
}
function ClearError()
{
   $("#bar").hide();
}

然后你会做：

if(el.value.toUpperCase() == states[i]) {
     ClearError();
     return true;
} else {
      ShowError("Please Enter a valid state");
}

查看此处运行的完整代码：http://jsfiddle.net/grFT7/8/

要使条在某个时刻消失，你会这样做：

 setInterval(function () { $("#bar").hide(); }, 5000);
                           //hide the bar every 5 secs (5000 milliseconds).

Answer 3

使用BootStrap's Alert。它易于使用，看起来很酷。

警报栏而不是警报框

3 个答案: