Question

我正在尝试进行基本的表单验证，但它不起作用。我需要以这样的方式制作它，以便在验证通过后，然后它只提交表单。我不知道怎么做。我的代码如下。

[重要要求] **我实际上对此很新，所以如果可能的话，我想得到关于DOM的一些具体信息/解释以及如何操纵它并设计它（W3School没有帮助）**

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="submit">Register</button>
</form> 



function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else{
        return true;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

由于

Answer 1

试试这个：

function validate() {
  var validForm = true;
  var msg = '';

  if (document.getElementById('first').value == "") {
    msg += 'First Name Blank! ';
    validForm = false;
  }
  if (document.getElementById('last').value == "") {
    msg += 'Last Name Blank! ';
    validForm = false;
  }
  if (!validForm) {
    alert(msg);
  }

  return validForm;
}

Plunker example

Answer 2

您的验证功能仅验证名字。无论它是否有效，该函数在检查姓氏之前都会返回。

function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;        // WILL RETURN EITHER HERE ...
    }else{
        return true;         // ... OR HERE
    }

return语句将在它出现的位置退出该函数，之后的其他代码根本不会被执行。

不要这样做，而是保留一个标志，确定字段是否都正常：

function validate(){
    var isValid = true; // Assume it is valid

    if(document.getElementById('first').value = ""){
        alert('First Name Blank!');
        isValid = false;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        isValid = false;
    }

    return isValid;
}

Answer 3

以下是检查验证的代码和如果数据不正确则停止提交。

<form id="reg" method="POST" action="user.php">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="button" id="submit">Register</button>
</form> 


document.getElementById('submit').onclick = function(){
    if(validate()){
         document.getElementById('reg').submit();
    }
}


function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

我在这里所做的只是将提交按钮设为常规按钮并通过JS处理提交，当点击submit类型的输入时，页面将提交表单，无论如何。要绕过此操作，您可以将其设为常规按钮，并在满足特定条件时手动提交表单。

Answer 4

您的javascript代码可以是：

document.getElementById('submit').onclick = function () {
    if (validate()) {
        document.getElementById('reg').submit();
    }
}

function validate() {
    if (document.getElementById('first').value == "") {
        alert('First Name Blank!');
        return false;
    } else if (document.getElementById('last').value == "") {
        alert('Last Name Blank!');
        return false;
    } else {
        return true;
    }
}

Javascript表单验证需要修复

4 个答案: