English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Vários métodos de envio de formulários com JS e verificação (artigo obrigatório)

No trabalho, descobri problemas convenientes no envio de formulários, muitas vezes funcionava bem no IE, mas ao usar o Firefox, havia problemas, e o uso do botão de envio não funcionou, então usei a maneira JS e funcionou, não sei por quê. Sob a pressão do orientador,总结了以下几种常用的表单提交方法。

Primeira forma:Envio do formulário, adicionar o evento onsubmit no tag form para verificar se o envio do formulário foi bem-sucedido

<script type="text/javascript">
   function validate(obj) {
    if (confirm("submeter formulário"63;")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://pt.oldtoolbag.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—Atenção para essa forma de escrita dos parâmetros-->
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  </form>
</body>

Segunda forma:Usar o botão button para acionar o evento de envio do formulário onclick="submitForm();", isso ignorará outros atributos, como o atributo onsubmit no tag form, que fica inativo. Neste caso, para realizar a verificação do formulário, pode-se colocar o código de verificação dentro do método submitForm();

<script type="text/javascript">
   function validate() {
    if (confirm("submeter formulário"63;")) {
      return true;
    } else {
      return false;
    }
   }
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://pt.oldtoolbag.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—Também pode usar document.getElementByIdx_x(“id_do_botão”).click(); para executar o evento onclick-->
  </form>
</body>

Terceira forma:Colocar o evento onsubmit dentro do tag submit, em vez do tag form, neste caso, a verificação do formulário falha e, ao clicar no botão submit, o formulário é enviado diretamente

<script type="text/javascript">
   function validate() {
    if (confirm("submeter formulário"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://pt.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  </form>
</body>

Quarta forma:Adicionar o evento onclick ao botão submit, onde esse evento é usado para a verificação de envio do formulário, funcionando de maneira semelhante a adicionar o evento onsubmit no tag form

<script type="text/javascript">
   function validate() {
    if (confirm("submeter formulário"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://pt.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  </form>
</body>

Quinta maneira:

<body>
  <form action="https://pt.oldtoolbag.com" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  </form>
 </body>
  <script type="text/javascript">
   function validate() {
      if (confirm("submeter formulário"63;")) {
        return true;
      } else {
        return false;
      }
}

Ao clicar no botão button para acionar o evento de submissão do formulário onclick="submitForm();", ele ignorará outros atributos de tags, como o atributo onsubmit da tag form, que se tornará inativo. Neste caso, para realizar a validação do formulário, você pode colocar o código de validação dentro do método submitForm();

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

Este artigo sobre várias maneiras de enviar formulários usando JavaScript e validação (obrigatório) é tudo o que o editor compartilha com vocês, esperando que possa ser uma referência útil e que todos apoiem o tutorial gritar.

Você também pode gostar