5

如果密码不匹配，我已经设法弄清楚如何“错误”警报，但这并不能阻止用户仍然完全提交表单。有人可以解释一下我如何编写一个语句，在允许用户使用 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; 
}
};
4

3 回答 3

4

防止表单提交的默认行为的最简单方法是让您的函数返回 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;
};
于 2013-09-17T14:24:04.940 回答
0

使用酷炫的新约束验证 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();

这几天得到了很好的支持。

于 2020-02-23T21:51:01.270 回答
-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;
}

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

于 2013-09-17T14:07:50.163 回答