0

我正在制作这个快速的互联网应用程序，用户在其中填写输入字段，然后单击“下一步”按钮。我在 W3Schools 上阅读了有关如何快速轻松地进行 Javascript表单验证的文章，但我想知道是否有一种方法可以在没有表单的情况下完成基本相同的事情（即document.getElementById("myInput").value；但这不起作用）。不想要表单的原因是，当单击“下一步”按钮时，它会执行页面动画然后转到下一页，并且我不希望任何表单提交延迟；（只需要一个输入和一个单击的按钮调用动画然后设置window.location）。

我正在做的验证类型只是检查该字段是否为空，所以我想做这样的事情：

JavaScript：

function ValidateFields() {
  var x = document.getElementById("myInput").value;
  if(x == null || x == '') {
    $(".error-msg").animate({opacity: "1"}, 400);
    return false;
  } else {
    $("body").animate({"margin-left": "-200px", opacity: "1"}, 400);
    setInterval("NextPage()", 800); // double animation time
  }
}
function NextPage() {
  window.location = "next.html?uid=false";
}

HTML：

<input type="text" id="myInput" placeholder="" />
<input type="button" value="Next" onclick="return ValidateFields()" />

但显然，它不会起作用（缺乏对应关系和基本结构（笑））。

注意：我知道 Javascript 或任何客户端验证并不理想，但我已经平衡了可能性和后果，一旦我将页面放在服务器上并启动它，我也会考虑使用 ASP 或 PHP 支持它，如果我注意到一些互联网流行的奇怪爆发，我并没有真正期待。

4

3 回答 3

0

我不确定在.val()没有表格的情况下做一个会很好（跨浏览器）。我会添加form，然后在按钮.click功能上这样做......

给按钮一个 id

<input type="button" id="mybutton" value="Next" />

和.click...

$("#mybutton").click(function(e) {
  e.preventDefault();
  ValidateFields();
}

这样点击按钮不会提交表单

于 2012-11-27T20:35:26.130 回答
0

由于您使用的是 jQuery，因此您可以尝试将输入文本值读取为

var x = $("#myInput").val();

或者可以检查长度如下

if ($("#myInput").length){

}

希望能帮助到你。

于 2012-11-27T20:44:57.457 回答
0

这段代码似乎工作（用 Chrome 测试）：

<html>
<head>
    <title>This works</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="" />
    <input type="button" value="Next" onclick="return ValidateFields();" />
    <div class="error-msg" style="opacity:0">Some error message</div>

    <script type="text/javascript">        
        function ValidateFields() {
          var x = document.getElementById("myInput").value;
          if(x == null || x == '') {
            $(".error-msg").animate({opacity: "1"}, 400);
            return false;
          } else {
            $("body").animate({"margin-left": "-200px", opacity: "1"}, 400);
            setTimeout("NextPage()", 800); // double animation time
          }
        }
        function NextPage() {
            window.location = "http://www.yahoo.com"; //just a test
        }
    </script>    
</body>
</html>​

让我知道您是否需要更多。

于 2012-11-27T20:57:14.817 回答