Question

我正在尝试创建一个具有不同输入的表单，输入验证错误接收文本，它不验证（我想只是文本）。代码是：

<form action="" id="myform" name="checkform" onsubmit="return validateform()" method="post">
    <label for='Name'>Name:</label>
    <input type="text" name="name" id="name"><br>
    <label for='Surname'>Surname:</label>
    <input type="text" name="surname" ><br> 
    <input type="submit" name="submit" value="Submit">
</form>

javascript是：

   function validateform(){     
    if(document.checkform.name.value == ""){
        window.alert("Please insert your name.");
            document.checkform.name.focus();
            return false;
    }
    var nameText = document.forms["myform"]["name"].value; /* here is the problem :-( */
    if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
    alert("Insert just letters !!!");
    return false;
    }
}

Answer 1

function validateform() {
  var nameTxtBx = document.checkform.name,
    name = nameTxtBx.value; //<-- added this line
  if (name == "") {
    alert("Please insert your name.");
    nameTxtBx.focus();
    return false;
  }
  if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
    alert("trebue doar litere");
    return false;
  }
  return true; //<-- added this line
}

<form action="" id="myform" name="checkform" onsubmit="return validateform()" method="post">
  <label for='Name'>Name:</label>
  <input type="text" name="name" id="name">
  <br>
  <label for='Surname'>Surname:</label>
  <input type="text" name="surname">
  <br>
  <input type="submit" name="submit" value="Submit">
</form>

Answer 2

您的变量中有拼写错误，您只需将变量nameText重命名为name，反之亦然。

 var nameText = document.forms["myform"]["name"].value;
     ^^^^^^^  
 if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
      ^^^^

Answer 3

命名表单控件使用其名称成为表单的成员。因此，即使表单具有 name 属性，因为您的表单还具有名称为 name 的控件，然后form.name引用控件，而不是表单的名称属性。

同样，拥有名称为 submit 的控件意味着您无法调用表单的 submit 方法，因为 form.submit 引用控件，而不是方法。因此，您应该使用不与标准表单属性冲突的控件名称。此外，很少需要表单控件的ID，因为它们可以作为表单的属性引用。

最后，使用 this 从侦听器传递对表单的引用很方便，那么表单上也不需要ID。考虑：

<form onsubmit="return validateform(this)" ... >
    Name: <input type="text" name="firstName"><br>
    Surname: <input type="text" name="surname"><br>
    <input type="submit" value="Submit">
</form>

然后在函数中：

function validateform(form) {

获取 firstName 控件的值一次：

  var firstName = form.firstName.value;

现在进行测试：

  if (firstName == "") {
    window.alert("Please insert your first name.");
    form.firstName.focus();
    return false;
  }

如果您想测试模式而不是找到所有匹配项，那么使用 test 比匹配更合适：

  if (!/^\s*[A-Za-z]+\s*$/.test(firstName)) {
    alert("Insert just letters !!!");
    return false;
  }
}

如何使用javascript验证表单输入文本

3 个答案: