使用 JavaScript 验证表单答案

【问题标题】：Validate a form using JavaScript使用 JavaScript 验证表单
【发布时间】：2012-05-19 06:26:36
【问题描述】：

我是一个初学者，我已经编写了一个验证表单的代码：

function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("First name must be filled out");
return false;
  }}
  <!-- html part-->
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><br>

此代码的问题是按下提交按钮会触发validateForm 函数。物体失去焦点时如何调用函数？

【问题讨论】：

我现在已经编辑了这个问题。我不知道为什么我投了反对票，而且在投反对票时没有人提及任何事情。如果他们能说明原因然后投反对票，这可能会有所帮助。

标签： javascript html forms login

【解决方案1】：

这是我的问题的确切解决方案。当对象失去焦点时用户会收到某种通知：

<script>
function validate(){
var y = document.getElementById("errorResponse");
var x=document.forms["myForm"]["fname"].value;
    if (x==null || x==""){
        y.innerHTML = "Error";
    }
}
</script>

HTML 表单是：

<form name="myForm">
First name: <input type="text" name="fname" onBlur = "validate()">
<div id = "errorResponse"></div>
<input type="submit" value="Submit">
</form>

可以在 CSS 中将 div 设计为红色以吸引用户注意，并且可以玩更多技巧。

【讨论】：

这并不意味着我的解决方案是错误的，你会收回我的 +1。 :)
哎呀！！我错误地点击了另一个链接，我没有收回你的 +1。我不确定它是如何被点击的。
我在这个网站上面临禁令，所以我让我的问题更有效，这样我就可以获得很少的赞成票，并且可以解除禁令。
开个玩笑.. 我不知道我是否会点击两次然后+1 会恢复吗？我从未尝试过。

【解决方案2】：

通过以下方式替换您输入元素的代码

<input type="text" onblur="return validateForm();" name="fname">

我猜这就是你要找的东西

【讨论】：

【解决方案3】：

<html>
<head>
<script type="text/javascript">
      function validateForm(oForm){
    var els = oForm.elements;
    for(var i = 0; i < els.length; i++){
       if('string' === typeof(els[i].getAttribute('data-message'))){
          return valEl(els[i]);
       }
    }
} 

function valEl(el){
    var method = el.getAttribute('data-valMethod');
    if('req' === method && (el.value === null || el.value === '')){
           alert(el.getAttribute('data-message'));
           return false;
    }
} 
</script>
</head>
<body>
<form name="myForm" action="#" onsubmit="return validateForm(this)" method="post">
First name: 
    <input data-message="First name must be filled out" data-valMethod="req" onchange="return valEl(this)"; name="fname"><br />
<input type="submit" value="Submit">
</form>
</body>

</html>

如果表单元素上存在所需的数据消息属性，我已将其拆分为一个函数，该函数可以验证“onchange”上的元素，另一个可以触发 form.onsubmit() 上每个元素的验证。由于 HTML5，Data-* 属性对于这些事情非常方便 :-)

通过这种方式，您可以避免在验证脚本中存储表单和元素的名称，因为您将引用传递给元素本身。这总是一件好事。

您可以从这里扩展 valEl 函数以适应其他类型的验证。

到目前为止唯一的限制是每个元素只能有一种类型的验证，但这应该很容易解决。

愉快的编码。 /G

PS http://jsfiddle.net/ePPnn/11/ 示例代码

【讨论】：

非常感谢，但我想要一些不需要按下提交按钮的东西.. onblur 解决了这个问题。