使用Javascript进行基本表单验证

Question

我试图了解（http://www.w3schools.com/js/js_form_validation.asp）上的函数，并使用getElementsByClassName对其进行以下工作（如下）以查找添加到HTML输入标签的类属性。 我是Java语言的新手，我不明白为什么我必须在下面的语句末尾添加.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 ，它们显式检查元素的内容是否为null。 没有它，他们将检查元素本身是否为null，即元素是否存在 。

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

如果知道只有一个元素，则可以检查getElementsByClassName("reqname")[0].value 。 如果要验证所有 “ 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

可能对以下有用：

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

jQuery的插件

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

Answer 3

输入字段不仅具有“值”（即写入其中的文本）的属性，还具有更多的属性。 因此，您必须通过在名称（在您的情况下为“值”）后面加上“。”来声明要访问的属性。 如果您真的要进行表单验证，还请确保也在您的php文件中进行验证！ javascript所做的所有工作都是在客户端进行的，因此人们基本上可以忽略它，而只是将一些随机数据发送到您的.php文件中。

Answer 4

写起来更简单

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

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