通过 HTML 按钮运行的 JS 脚本-解网

问：

所以我是编程世界的新手，我一直在为这个我似乎无法弄清楚的情况而绞尽脑汁。我有一个 HTML 按钮和一个函数（如果 - 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;之后，分别ifelse
没有<form></form>

还尝试在谷歌上查找，但由于我是新手级别，因此某些解决方案似乎太先进了，并且从中理解不多。

所以我希望我能足够清楚地知道我希望网页显示什么......我想在“true”时看到错误文本 from to stay on the webpage，但我现在的行为是我看到文本，但之后页面重新加载并且文本消失。<p>else

JavaScript 表单功能按钮

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

有关交互式示例，请参阅此实现。请注意，我正在使用您提供的 if 条件和正则表达式，它们可能需要一些调整，即函数的返回值决定是否提交表单（重新加载）。checkform

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>

0赞 chrwahl 12/2/2023 #2

使用 HTML 中的内置表单验证，而不是在 submit 事件上创建自己的表单验证。在输入元素上使用该属性。只要某些输入元素无效，表单就不会提交。使用该属性为表单验证提供一些用于评估值的内容。requiredpattern

然后单击提交按钮，（内置）验证将运行，如果输入无效，您将获得有关该元素的事件。此事件可用于向用户提供反馈 -- 就像这里更改标签的类名一样（CSS 将完成其余的工作）。请注意，该参数在方法 addEventListener（）上设置为。这是为了防止显示默认消息文本。invaliduseCapturetrue

然后输入值发生变化，就会有一个事件。使用它再次计算值，如果有效，则删除标签上的 className。input

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  let label = e.target.closest('label');
  label.classList.add('error');
}, true);

document.forms.form01.addEventListener('input', e => {
  let label = e.target.closest('label');
  if(e.target.validity.valid){
    label.classList.remove('error');
  }
});

p.feedback {
  color: blanchedalmond;
  font-size: 20px;
  margin: 0;
  visibility: hidden;
}

label.error ~ p.feedback {
  visibility: visible;
}

<form name="form01">
  <label>Nume:
    <input type="text" name="nume"
      pattern="[A-Z-a-z ]*" required>
  </label>
  <p class="feedback">Nume incorect</p>
  <label>Email:
    <input type="email" name="email" autocomplete="on"
      pattern="([A-Za-z0-9_\-\.])+\@([A-Za-z])+\.([A-Za-z]{2,4})" required>
  </label>
  <p class="feedback">Email incorect</p>
  <label>Produs:
    <input type="text" name="produs"
      pattern="[A-Za-z0-9]*" required>
  </label>
  <p class="feedback">Nume produs incorect</p>
  <button type="submit">Submit</button>
</form>

上一个：如果有两个或多个具有相同标签的<输入>，有没有办法告诉浏览器自动填充<表单中的特定字段>？- HTML、JS、React

下一个：在与其他数据一起提交表单时，带有类型按钮的输入元素的名称-值对是否会在发布请求的正文中传递？

通过 HTML 按钮运行的 JS 脚本

JS script running via HTML button

评论