Question

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

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

以下是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; 
}
};

Answer 1

阻止表单提交的默认行为的最简单方法是让您的函数返回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;
};

Answer 2

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

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

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

Answer 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。

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

3 个答案: