码迷,mamicode.com
首页 > 其他好文 > 详细

表单提交验证方法

时间:2016-05-29 18:32:59      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

 

第一种方式:表单提交,在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>

 

表单提交验证方法

标签:

原文地址:http://www.cnblogs.com/lilinfeng569482/p/5539861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!