Question

我必须进行简单的验证。它在第一次正常工作，但是如果通过按F5刷新页面，则填写文本中的值后，代码将无法正常工作。

产生错误的步骤

专注于第一个文本框并模糊而不填充任何值。函数将警告“错误”，并将命名错误的类添加到文本框
现在将在文本框中输入值，然后按F5。然后从文本框中删除值，模糊功能会提示“没有错误”这里是问题。它应该警告，因为我们在空文本框上模糊。

我投资门，发现这个问题正在发生，因为onload函数，我提到代码，如果输入文本值不等于空白然后模糊文本框

<head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function(){
       $('input').blur(function(){
          if($(this).hasClass('error')){
             alert('error')
          }
          else {
             alert('no error')
         }
     }) 
  })

  function test(id){
     if($(id).val()==''){
       $(id).addClass('error')
     }
     else {
       $(id).removeClass('error')
     }
  }

  $(function(){
     setTimeout(function(){
          $('input').each(function(){
             if($(this).val()!=''){
                $(this).blur();
             }
          })
     },1000)
  })
</script>
<style>
    .error{ border:#F00 solid 1px}
</style>
</head>


<body>
    <input type="text" onblur="test(this)"/>
    <input type="text" onblur="test(this)" />
</body>

Answer 1

如果在确定输入框是否为空时检查值是否更好，而不是css类。

$('input').blur(function () {
    if ($.trim($(this).val()) == '') {
        alert('error')
    } else {
        alert('no error')
    }
});

我认为FF会尝试保留HTML文档的状态，因此该类仍然应用于元素

Answer 2

只需尝试使用以下内容：

脚本部分：

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
  function test(textId){    
     if($("#"+textId).val()==""){
       $("#"+textId).addClass("error"); 
       alert("Error"); 
       setTimeout(function(){
       $("#"+textId).focus();
       },100);
       return false;
     }
     else {
       $("#"+textId).removeClass("error");
       alert("No Error");
       return true;
     }
  }
  </script>

HTML部分：

<style>
    .error{ border:#F00 solid 1px}
</style>
<body>
    <input type="text" onblur="test(this.id);" id="text1" value=""/>
    <input type="text" onblur="test(this.id);" id="text2" value=""/>
</body>

我认为这可以帮助您解决问题。

页面加载后.blur无法正常工作

2 个答案: