0

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

[重要请求] **我实际上对此很陌生，所以如果可能的话，我想获得一些关于 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;
    }
}

谢谢

4

4 回答 4

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 示例

于 2013-11-09T17:28:28.007 回答
0

您的 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;
    }
}
于 2013-11-09T17:34:12.897 回答
0

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

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;
}
于 2013-11-09T17:24:53.540 回答
0

这是检查验证并在数据不正确时阻止其提交的代码。

<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单击类型的输入时，无论如何页面都会提交表单。要绕过这一点，您可以将其设为常规按钮，并在满足某些条件时使其手动提交表单。

于 2013-11-09T17:26:12.353 回答