Javascript 表单验证需要修复

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 语句将在它出现的地方退出函数，之后的其他代码根本不会执行。

不要那样做，保留一个标志来确定字段是否都OK：

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;
    }
}