通过 HTML 按钮运行 JS 脚本

Question

所以我是编程世界的新手，我一直在绞尽脑汁地思考这种我似乎无法弄清楚的情况。 我有一个 HTML 按钮和一个函数（if - else），我希望该函数在输入不符合我想要的输入格式时“停止”并显示错误

<script type="text/javascript" src="../Scripts/script.js"></script>

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  var a = document.getElementById("nume").value;
  var b = document.getElementById("email").value;
  var c = document.getElementById("produs").value;

  if (a.match(numecomplet)){
    document.getElementById("nume").innerHTML = "";
  }else {
    document.getElementById("numegresit").innerHTML = "Nume incorect";
  }

  if (b.match(formatemail)){
    document.getElementById("email").innerHTML = "";
  } else {
    document.getElementById("emailgresit").innerHTML = "Email incorect";
  }
  
  if (c.match(numeprodus)) {
    document.getElementById("produs").innerHTML = "";
 } else {
    document.getElementById("prodgresit").innerHTML = "Nume produs incorect";
 }
}

<form>
  <label for="nume">Nume:</label>
      <input type="text" id="nume" name="nume" value="";><br>
          <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">Email:</label>
      <input type="email" id="email" name="email" autocomplete="on" value="";><br>
          <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">Produs:</label>
      <input type="text" id="produs" name="produs" value="";><br>
          <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button onclick="checkform()"> Submit </button>
</form>

我尝试过：

• button > onclick=submit

  而不是

  onclick=checkform;

• return false;

  位于语法末尾（最后一个

  {}

  之前），每个

  else

  语法之后

• return true; + return false;

  分别在

  if

  之后

  else

• 没有

  <form></form>

也尝试在Google上查找，但由于我是新手，一些解决方案似乎太先进了，并且对它们了解不多。

所以我希望我能够足够清楚我想要网页显示的内容...我希望看到来自

<p>

的错误文本，以便当

else

为“true”时留在网页上，但我现在的行为是我看到了文本，但之后页面重新加载并且文本消失了。

Answer 1

您应该使用事件侦听器并为此防止默认，如下所示：

document.querySelector('button').addEventListener('click', (event) => {

      // Prevent submitting of the form

      event.preventDefault();

      // Validate

      if(checkform()){
 
           // Only submit it if it is valid
 
           document.querySelector('form').submit();
 
      }
 
});

有关完整示例，请参阅此实现：

let numecomplet = /^[A-Za-z ]*$/;
let formatemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})$/;
let numeprodus = /^[A-Za-z0-9]*$/;

function checkform() {
  var a = document.getElementById("nume").value;
  var b = document.getElementById("email").value;
  var c = document.getElementById("produs").value;

  if (a.match(numecomplet)){
    document.getElementById("nume").innerHTML = "";
  }else {
    document.getElementById("numegresit").innerHTML = "Nume incorect";
  }

  if (b.match(formatemail)){
    document.getElementById("email").innerHTML = "";
  } else {
    document.getElementById("emailgresit").innerHTML = "Email incorect";
  }
  
  if (c.match(numeprodus)) {
    document.getElementById("produs").innerHTML = "";
 } else {
    document.getElementById("prodgresit").innerHTML = "Nume produs incorect";
 }
 
 // Return true or false based on your desired critera for validity
 
 return a.match(numecomplet) && b.match(formatemail) && c.match(numeprodus);
 
}

document.querySelector('button').addEventListener('click', (event) => {

     // Prevent submitting of the form

     event.preventDefault();

     // Validate

     if(checkform()){
     
          // Only submit it if it is valid
     
          document.querySelector('form').submit();
     
     }
     
});

<form>
  <label for="nume">Nume:</label>
      <input type="text" id="nume" name="nume" value="";><br>
          <p id="numegresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="email">Email:</label>
      <input type="email" id="email" name="email" autocomplete="on" value="";><br>
          <p id="emailgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <label for="produs">Produs:</label>
      <input type="text" id="produs" name="produs" value="";><br>
          <p id="prodgresit" style="color: blanchedalmond; font-size: 20px;"></p>

  <button onclick="checkform()"> Submit </button>
</form>