如何在提交时验证此 HTML/JavaScript 表单？答案

【问题标题】：How do I validate this HTML/JavaScript form onsubmit?如何在提交时验证此 HTML/JavaScript 表单？
【发布时间】：2013-09-21 23:59:56
【问题描述】：

如果密码不匹配，我已经设法弄清楚如何“错误”发出警报，但这并不妨碍用户仍然完全提交表单。有人可以解释一下我如何编写一个语句，在允许用户使用 onsubmit 函数提交表单之前检查所有内容是否返回 true？

请注意，我了解我没有编写表单的 onsubmit HTML 中注明的名为 validateForm 的函数，我只知道在编写此函数时需要它

这里是 jsfiddle 的链接：http://jsfiddle.net/shanny/VSUM6/28/

这里又是代码：

HTML：

   <html>
   <h1>Form Validation</h1>
   <div id="error"></div>
   <form name="myForm" action="" method="post" target="_blank" onsubmit="return validateForm()">
       First Name: <input type="text" name="firstName" autofocus required >
       <br />
       Last Name: <input type="text" name="lastName" required >
       <br />
       Email: <input id="email" type="email" name="email" placeholder="e.g., name@provider.com" required>
       <br />
       Password: <input type="password" name="password1" id="password1" required >
       <br />
       Confirm Password: <input type="password" name="password2" id="password2" required >  <p id="error2"></p>
       <br /><br />
       Sex: 
       &nbsp;&nbsp;<input type="radio" name="sex" value="male" >Male 
       &nbsp;<input type="radio" name="sex" value="female">Female
       <br /><br />
       Quantity:<br />
       <input name ="scale" type="range" min="1" max="6" step="1" value="1" >
           <br />
           &nbsp;&nbsp;1&nbsp;&nbsp;&nbsp; 2&nbsp;&nbsp;&nbsp; 3&nbsp;&nbsp;&nbsp; 4&nbsp;&nbsp;&nbsp; 5&nbsp;&nbsp;&nbsp; 6
       <br /><br />
       Interests (select all that apply):
       <br />
       <input type="checkbox" class="radio" name="interests" value="running">This
       <input type="checkbox" class="radio" name="interests" value="swimming">That
       <input type="checkbox" class="radio" name="interests" value="hiking">Other
           <br /><br />
       <input name="submit" id="submit" type="submit" value="Hayo!">
   </form>
   </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; 
}
};

【问题讨论】：

标签： javascript html forms validation

【解决方案1】：

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

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

然后您可以遍历错误并做一些有用的事情。

【讨论】：

他们似乎没有使用 jQuery。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

使用酷炫的新式Constraint Validation API：

const setPasswordValidity = () => {
    const valid = pass2.value === pass1.value;

    for (let el of [pass1, pass2]) {
        if (valid) el.setCustomValidity("");
        else el.setCustomValidity("Passwords do not match!");
    }
};

pass1.onchange = setPasswordValidity;
pass2.onchange = setPasswordValidity;
setPasswordValidity();

我是well supported these days。

【讨论】：