zoukankan      html  css  js  c++  java
  • 利用JS提交表单的几种方法和验证

     

    利用JS提交表单的几种方法和验证

     

    第一种方式:表单提交,在form标签中增加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="http://www.baidu.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
       
           <input type="text" id="myText"/>
           <input type="submit" value="submit"/>
       
        </form>
      </body>

    第二种方式:通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在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="http://www.baidu.com" id="myForm">
       
           <input type="text"/>
           <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
       
        </form>
      </body>

    第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交
      <script type="text/javascript">
         function validate() {
            if (confirm("提交表单?")) {
               return true;
            } else {
               return false;
            }
         }
      </script>
      <body>
       <form action="http://www.baidu.com">
       
           <input type="text"/>
           <input type="submit" value="submit" onsubmit="return validate()"/>
       
        </form>
      </body>

    第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样
      <script type="text/javascript">
         function validate() {
            if (confirm("提交表单?")) {
               return true;
            } else {
               return false;
            }
         }
      </script>
      <body>
       <form action="http://www.baidu.com">
       
           <input type="text"/>
           <input type="submit" value="submit" onclick="return validate()"/>
       
        </form>
      </body>

     

    第五种方式:

      <body>

        <form action="http://www.baidu.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;

               }

         }

        

         通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

         function submitForm() {

               if (validate()) {

                    document.getElementByIdx_x("myForm").submit();

               }

         }

        

         document.getElementByIdx_x("myBtn").onclick = submitForm;

      </script>

  • 相关阅读:
    HDU 4539郑厂长系列故事――排兵布阵(状压DP)
    HDU 2196Computer(树形DP)
    HDU 4284Travel(状压DP)
    HDU 1520Anniversary party(树型DP)
    HDU 3920Clear All of Them I(状压DP)
    HDU 3853LOOPS(简单概率DP)
    UVA 11983 Weird Advertisement(线段树求矩形并的面积)
    POJ 2886Who Gets the Most Candies?(线段树)
    POJ 2828Buy Tickets
    HDU 1394Minimum Inversion Number(线段树)
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5198387.html
Copyright © 2011-2022 走看看