如何在提交時驗證此 HTML/JavaScript 表單？

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

Answer 2

使用酷炫的新約束驗證 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();

這些天它得到了很好的支持。

Answer 3

從歷史上看，我使用了以下想法：

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

然后，您可以遍歷錯誤並做一些有用的事情。

如何在提交時驗證此 HTML/JavaScript 表單？

問題描述

3 個解決方案

解決方案1
4 已采納 2013-09-17 14:24:04

解決方案2
0 2020-02-23 21:51:01

解決方案3
-1 2013-09-17 14:07:50

如何在提交時驗證此 HTML/JavaScript 表單？

問題描述

3 個解決方案

解決方案1 4 已采納 2013-09-17 14:24:04

解決方案2 0 2020-02-23 21:51:01

解決方案3 -1 2013-09-17 14:07:50

解決方案1
4 已采納 2013-09-17 14:24:04

解決方案2
0 2020-02-23 21:51:01

解決方案3
-1 2013-09-17 14:07:50