Question

当我单击表单页面上的提交时，我的JavaScript无法运行。

<form onsubmit="validateReg()">

    <p>
     //email registration
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    //password registration
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </for

我已经尝试过多次将Javascript链接到HTML表单，并且在单击“提交”时在页面上没有返回任何错误警报。

//HTML
<form onsubmit="validateReg()">

    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </form>

//Javascript 
//Main Function
  function validateReg(){
  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);
//validate Email
if(emailResult == false){
  alert("Please enter a valid email address");
  return false;
}
//validate lower case
  var lowerCaseLetters = /[a-z]/g;
if(password.value.match(lowerCaseLetters)) {
    return true;
  }else{
    alert("Password needs a lower case!");
    return false;
  }
  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
if(password.value.match(upperCaseLetters)){
    return true;
  }else{
    alert("Password needs an upper case!");
    return false;
  }
  //validate numbers
  var numbers = /[0-9]/g;
if(password.value.match(numbers)){
  return true;
}else{
  alert("Password needs a number!");
  return false;
}
//validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
if(password.value.match(special)){
  return true;
}else{
  alert("Password needs a special character!");
  return false;
}
  if(password.value.length >=8){
    return true;
  }else{ alert("Password needs to be at least 8 characters");
   return false;
 }
}

我希望代码在错误提交密码以及正确提交密码和电子邮件时会输出错误，所以谢谢。

Answer 1

一种更好的方法是在您的js文件中添加一个事件监听器，并监听'submit'事件。接下来是您的功能。

此外，请确保将js文件添加到HTML文件中的脚本标签中。如果您的逻辑正确，那应该可以。

Answer 2

正如Oluwafemi所说，您可以将事件侦听器放在“提交”事件上。我将事件放在“提交”按钮上。这样，您可以在click事件上将其停止，而不必触发表单的提交。如果您更新代码，将来可能会帮助您进行故障排除。

修改代码也不需要很多。

首先，您需要将表单更新为如下形式：

<form id="form">
    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p>
  <p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
  <br />
    <input id="submitButton" type="submit" class="submit">
  </form>

然后将其添加到您的javascript函数下方，如下所示：

document.querySelector("#submitButton").addEventListener("click", function(event) {
         event.preventDefault;

         validateReg()
}, false);

这是在停止提交表单并按预期进行检查。您可以在Mozilla developer site上了解更多信息。

您需要将document.getElementById('form').submit();添加到任何设置为true的return语句中。

但是，我确实进行了更新，以使提交成为默认功能，并且如果检查失败，则检查仅返回false：

//Javascript 
//Main Function
function validateReg() {

  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);

  //validate Email
  if(emailResult == false){
    alert("Please enter a valid email address");
    return false;
  }

  //validate lower case
  var lowerCaseLetters = /[a-z]/g;
  if(password.match(lowerCaseLetters) == null) {
    alert("Password needs a lower case!");
    return false;
  }

  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
  if(password.match(upperCaseLetters) == null){
    alert("Password needs an upper case!");
    return false;
  }

  //validate numbers
  var numbers = /[0-9]/g;
  if(password.match(numbers) == null){
    alert("Password needs a number!");
    return false;
  }

  //validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
  if(password.match(special) == null){
    alert("Password needs a special character!");
    return false;
  }

  if(password.length < 8){
    return false;
  }

  document.getElementById('form').submit();
}

如何将我的JavaScript正确链接到HTML表单？

2 个答案: