如何检查 <form> 中的输入并正确发送表单

Question

我有两个问题：
如何更好地检查输入？我有想法：
首先，在输入附近设置字段。

<input type='text' name='firstname'><label id='firstnameError'></label>

其次，使用输入的 id 和该标签的 id 在输入 onBlur 上调用 js-function。

<input type='text' name='firstname' id='firstname' onBlur='checkEmpty("firstname", "firstnameError");'><label id='firstnameError'></label>

还有js脚本：

function checkEmpty(fieldId, errorFieldId)
{
    var data = document.getElementById(fieldId).value;
    if (data == "") 
    {
        document.getElementById(errorFieldId).innerHTML="Error, input something!...";
    }
}

我只会在所有输入上使用这个函数，对吧？ 这是正确的吗？

如何正确检查表单中的所有输入？
当然，我可以设置 type=button 并 onSubmit 调用一些函数，它将检查此表单中的所有元素。 ~ 与第一个问题相同的功能，但每个输入有 5-7 个 if 块。是的，对于 10 个表单，我将不得不编写 10 个函数，等等。如何做得更好？在我看来，我只能发送表单 Id/name 并获取元素的子级。我对么？

也许另一种方式？无论如何，我在我的网站上使用 jquery（一些 ajax）。也许在 jquery 上做我想做的事情更容易？问题是我的js不太好，很容易使用jquery。你怎么看？

Answer 1

为了改进您的设计，最好使用非内联 JavaScript。尝试使用这样的设计：

var fname = document.getElementById("firstname");
var other = document.getElementById("otherid");
fname.onblur = other.onblur = function() {
   checkEmpty(this.id,this.id+"Error");
}

这将为您所需的所有元素提供相同的 onclick 功能，并消除那些讨厌的 onblur 属性。

编辑：确保在像这样链接赋值之前声明变量，否则会产生不需要的全局变量。

Answer 2

如果你只是想验证是否提供了某些数据，你可以使用 required 属性。

<input type="text" name="username" required>

如果您使用的是 XHTML，它应该如下所示..

<input type="text" name="username" required="required">

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 required 属性，但 Internet Explorer 9 及更早版本或 Safari 不支持该属性。

如果你想使用 JavaScript。您可以创建一个 javascript 函数，该函数将在提交表单时调用。

<form name="search" onsubmit="return validate()" >
   Name: <input type="text" name="name"/>
   Age: <input type="gender" name="sex"/>
   <input type="submit" name="Submit" value="Submit"/>
</form>

function validate(){
  // all the code for verification
  return false;  // if any of the step verification step fails. Otherwise return true.
}

来源：http://www.w3schools.com/tags/att_input_required.asp