无需表单的 Javascript 输入验证答案

【问题标题】：Javascript input validation without needing a form无需表单的 Javascript 输入验证
【发布时间】：2025-11-30 08:20:03
【问题描述】：

我正在制作这个快速的互联网应用程序，用户在其中填写输入字段，然后单击“下一步”按钮。我在 W3Schools 上阅读了有关如何快速轻松地进行 Javascript form 验证的文章，但我想知道是否有一种方法可以在没有表单的情况下完成基本相同的事情（即 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()" />

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

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

【问题讨论】：

document.getElementById("myInput").value - 这可能不起作用，因为您的输入没有id....
顺便说一句，我知道如果没有表单（几乎无法解析任何信息），整个项目的功能将无法工作，但这只是演示目的。
哦，糟糕，当我在帖子中输入此内容时，我不小心将 id 更改为 name。我的错误，我将编辑我的问题。
顺便说一句，您应该使用setTimeout(NextPage, 800) 而不是您所拥有的。 1) 间隔用于重复事件，超时仅发生一次，2) 函数上的字符串 eval 是一个 bad 习惯，只需传入函数引用（注意我没有括号或引号）。不幸的是，我不知道为什么这对你来说失败了——看起来x 应该被正确拉取。尝试使用$('#myInput') 而不是getElementById() 看看会发生什么？
+1 哇，谢谢！这样可行！我对 JavaScript 有点小白，这是有道理的。

标签： php javascript jquery validation input

【解决方案1】：

这段代码似乎可以工作（用 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>

如果您需要更多，请告诉我。

【讨论】：

【解决方案2】：

我不确定在没有表单的情况下使用.val() 是否能正常工作（跨浏览器）。我会添加form，然后在按钮.click 函数上这样做......

给按钮一个id

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

还有.click...

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

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

【讨论】：

【解决方案3】：

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

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

或者可以如下检查长度

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

}

希望对你有帮助。

【讨论】：