JS를 이용한 폼 제출의 여러 가지 방법과 검증-JS 튜토리얼-php.cn

JS를 이용한 폼 제출의 여러 가지 방법과 검증

高洛峰

풀어 주다： 2016-12-16 15:16:23

원래의

1363명이 탐색했습니다.

직장에서 양식 제출이 편리하다는 것을 알았습니다. IE에서는 제출이 잘 되었지만, Firefox에서는 제출 버튼 사용이 실패하여 JS를 사용하여 성공했습니다. . 강사의 권유에 따라 양식 제출을 위한 일반적인 방법을 다음과 같이 요약했습니다.

첫 번째 방법: 양식 제출, 양식 태그에 onsubmit 이벤트를 추가하여 양식 제출 성공 여부 확인

<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="//m.sbmmt.com" onsubmit="return validate(document.getElementByIdx_x(&#39;myText&#39;));"> <!—参数的这种写法注意下-->
   
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
   
  </form>
</body>

로그인 후 복사

두 번째 방법: 버튼 버튼 ="submitForm();"은 다른 태그의 속성을 무시합니다. 예를 들어 양식 태그의 onsubmit 속성은 유효하지 않습니다. 이때, Form 검증을 위해서는 submitForm() 메소드에 검증코드를 넣어서 검증하면 된다.

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
    
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="//m.sbmmt.com" id="myForm">
   
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
   
  </form>
</body>

로그인 후 복사

세 번째 방법: 양식 태그 대신 제출 태그에 onsubmit 이벤트를 삽입합니다. 이 때 양식 확인을 클릭하면 양식이 직접 제출됩니다.

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="//m.sbmmt.com">
   
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
   
  </form>
</body>

로그인 후 복사

네 번째 방법: 제출 버튼에 onclick 이벤트를 추가합니다. 이 이벤트는 양식 제출을 확인하는 데 사용됩니다. 이 기능은 양식 태그

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="//m.sbmmt.com">
   
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
   
  </form>
</body>

로그인 후 복사

에 onsubmit 이벤트를 추가하는 것과 유사합니다. 다섯 번째 방법:

<body>
  <form action="//m.sbmmt.com" id="myForm">
   
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
   
  </form>
 </body>
  
  <script type="text/javascript">
   
   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

로그인 후 복사

버튼 버튼을 통해 양식 제출 이벤트 onclick="submitForm();"을 트리거하면 다른 태그의 속성이 무시됩니다. 유효하지 않은. 이때 양식 확인을 수행하려면 submitForm()에 확인 코드를 입력하면 됩니다.

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

로그인 후 복사

다음을 사용하여 양식을 제출하는 다른 방법 JS 및 검증 관련 글은 PHP 중국어 홈페이지를 주목해주세요!