使用 Javascript 进行基本表单验证

Question

我正在尝试了解 (http://www.w3schools.com/js/js_form_validation.asp) 上的函数，并使用 getElementsByClassName 对其进行返工（如下）以查找我添加到 HTML 输入标记的类属性。我对 Javascript 很陌生，我不明白为什么我必须在下面的语句末尾添加 .value （W3 示例）或 .view （我的示例）才能使其正常工作。据我了解，函数中的第一条语句说查看文档，并将变量 X 分配给具有类属性 reqname 的任何输入字段。

谢谢。

我的功能：

function validateForm()
{
var x=document.getElementsByClassName("reqname").view;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

W3 的功能：

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

Answer 1

诸如输入字段之类的表单元素通常具有value，即已输入到输入字段中的字符串。

通过指定.value，他们明确检查元素的content 是否为空。没有它，他们将检查 元素本身 是否为空，即元素 是否存在。

您的代码还有一些问题。您使用的.view 没有意义。此外，getElementsByClassName 返回的是元素列表，而不是单个元素，因此您将无法立即访问其 .value。

如果您知道只有一个元素，您可以查看getElementsByClassName("reqname")[0].value。如果您想验证 all "reqname" 字段的值，则必须遍历您的集合并单独检查每个项目：

var elements =document.getElementsByClassName("reqname");
for(var i = 0, l = elements.length; i < l; i++) {
   var x = elements[i].value;
   if(x == null || x == '') {
      alert("First name must be filled out");
      return false;
   }
}

Answer 2

输入字段的属性不仅仅是它的“值”（即写入其中的文本）。因此，您必须通过在名称（在您的情况下为“值”）附加“。”来说明要访问的属性。 如果你真的想做表单验证，也一定要在你的 php 文件中做！ javascript 所做的一切都在客户端，因此人们可以 - 基本上 - 忽略它，只需将一些随机数据发送到您的 .php 文件。

Answer 3

可能对以下有用：

http://tetlaw.id.au/view/javascript/really-easy-field-validation

jquery 插件

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 4

写起来更简单

function ValidateForm() {
    var x = $("#inputOID").val();
    if (x == null || x == "")
        alert("......");
    return false;
}

所以你的函数是ValidateForm。您声明一个变量 x，并通过输入 ID 从输入中给出值。例如<input id="inputOID" .... />。所以 x 将包含输入的值。您验证是否为空或为空，如果是，您将提醒用户。 就这样！祝你好运！