如何在Submit上验证此HTML/JavaScript表单？

我已经设法找出了如何在密码不匹配时发出“错误”警报，但这并不能阻止用户仍然提交表单。有人能解释一下，在允许用户使用onsubmit函数提交表单之前，我如何编写一条语句来检查所有内容是否返回true

请注意，我知道我没有编写一个名为validateForm的函数，该函数在表单的onsubmit HTML中有说明，我只知道在编写该函数时，它需要在那里

以下是指向JSFIDLE的链接：

下面是代码：

HTML:

JavaScript:

var errorBox=document.getElementById("error");
var errorText=document.getElementById("error2");
var pass2=document.getElementById("password2");
var pass1=document.getElementById("password1");

pass2.onchange = function() {
if (pass2.value !== pass1.value) {
    pass2.style.border="2px solid red";
    errorText.innerHTML="Passwords do not match!";
    errorText.style.color="red";
    //errorBox.style.height="40px";
    //errorBox.style.visibility="visible";
    //errorBox.innerHTML="<p>Passwords do not match!</p>";
    return false;
}
else {        
    pass2.style.border="2px solid #B5DCF7";
    errorText.style.color="green";
    errorText.innerHTML="Passwords match!";
    return true; 
}
};

---

历史上，我曾使用过以下想法：

function validateForm() {
  var errors = 0;
  var form = document.getElementsByTagName('form')[0];

  /* 
   * Store appropriate form elements.
   * There are many ways to do this, but I'm keeping it 
   * simple for the example
   */
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getelementById("lastName").value;
  // etc..

  // validate required fields
  if (firstName === "") {
    errors++;
  }

  if (lastName === "") {
    errors++;
  }

  // etc...

  return errors === 0;
}

您还可以使错误更加健壮

function validateForm() {
  var errors = [];
  var form = document.getElementsByTagName('form')[0];

  /* 
   * Store appropriate form elements.
   * There are many ways to do this, but I'm keeping it 
   * simple for the example
   */
  var fnElem = document.getElementById("firstName");
  var lnElem = document.getelementById("lastName");
  var firstName = fnElem.value;
  var lastName = lnElem.value;
  // etc...

  // validate required fields
  if (firstName === "") {
    errors.push({
      elem: firstName,
      message: "First name can't be blank"
    });
  }

  if (lastName === "") {
    errors.push({
      elem: lastName,
      message: "Last name can't be blanks"
    });
  }

  // etc...

  return errors.length === 0;
}

---

然后，您可以遍历错误并执行一些有用的操作。

防止表单提交的默认行为的最简单方法是让函数返回false。这将阻止表单提交

var onSumbitHandler = function(event){
    /* validate here */
    return false;
};

另一种技术上更好的方法是对作为参数传递给onSubmit函数的事件对象调用preventDefault。唯一的问题是一些旧版本的IE不支持此方法，因此您需要为这种情况提供一个后备方案：

var onSubmitHandler = function(event){
    /* validate here */
    if(event.preventDefault)
        event.preventDefault();
    else
        event.returnValue = false;
};

使用凉爽、全新的ish：

const setPasswordValidity==>{ const valid=pass2.value==pass1.value； 让el离开[pass1，pass2]{ 如果有效，el.setCustomValidity； else el.setCustomValidityPasswords不匹配！； } }; pass1.onchange=setPasswordValidity； pass2.onchange=setPasswordValidity； 设置密码有效性；

---

是的。

他们似乎没有使用jQuery。

var onSubmitHandler = function(event){
    /* validate here */
    if(event.preventDefault)
        event.preventDefault();
    else
        event.returnValue = false;
};