zoukankan      html  css  js  c++  java
  • form

    1、有没有action属性都会自动提交

    <form  method="post">
        <input type="text" name="age" value="">
        <input type="submit" value="确认">
    </form>

    2、点击type为botton的input不会提交表单,但是如果在浏览器将type值改为submit 则会提交

    <form action="'  method="post">
        <input type="text" name="age" value="">
        <input type="button" value="确认">
    </form>

    3.在onsubmit="check()" 这种必须加上retrun 函数里retrun false;才会阻止表单自动提交

    <form  method="post" onsubmit="return check()">
        <input type="text" name="age" value="">
        <input type="submit" value="确认">
    </form>
    <script type="text/javascript"> 
        function check(){
            return false;
        }
    </script>

    正确姿势

    <body>
        <form  method="post">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
        </form>
        <script type="text/javascript"> 
            $("form").submit(function () {
                if(/^[0-9]*$/.test('123')){ 
                    return true;
                }
                return false;//必须加这个
            });
        </script>
    </body>

    其他情况

    无效

    <body>
        <form  method="post" onsubmit="return check()">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
        </form>
        <script type="text/javascript"> 
            $('form').submit(function(){
                return false;
            })//加上这个则函数里的return true 无效,即便是匹配上了也不能让form提交
            function check(){
                
                if(/^[0-9]*$/.test('123')){    
                    
                    return true;
                }else{        
                    return false;
                    
                }
            }
        </script>
    </body>

    上面的情况变有效

    <body>
        <form  method="post" onsubmit="check()">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
        </form>
        <script type="text/javascript"> 
            $('form').submit(function(){
                return false;
            })
            function check(){
                
                if(/^[0-9]*$/.test('123')){    
                    
                     $("form").unbind();//这个才有效
                }
            }
        </script>
    </body>
    
    
    
    <body>
        <form  method="post" onsubmit="return check()">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
        </form>
        <script type="text/javascript"> 
            $('form').submit(function(){
                return false;
            })
            function check(){
                
                if(/^[0-9]*$/.test('123')){    
                    
                     $("form").unbind();//这个才有效
                }
            }
        </script>
    </body>

    无效

    <body>
        <form  method="post">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
            <button>提交</button>
        </form>
        <script type="text/javascript"> 
            $('form').submit(function(){return false;})
    
            $("input[type='submit']").click(function(){
                $('form').submit();
            })
    
            $("button").click(function(){
                $('form').submit();
            })        
            
        </script>
    </body>

    有效:

    <body>
        <form  method="post">
            <input type="text" name="age" value="">
            <input type="submit" value="确认">
            <button>提交</button>
        </form>
        <script type="text/javascript"> 
            $('form').submit(function(){return false;})
    
            $("input[type='submit']").click(function(){
                $("form").unbind();//这个才有效
            })
    
            $("button").click(function(){
                $("form").unbind();//这个才有效
            })        
            
        </script>
    </body>

    另一种场景点击a

  • 相关阅读:
    Hello Springboot
    Spring AOP
    代理模式
    Spring 面向注解开发
    Spring Bean 的配置
    IDEA 14 for Mac 提示要安装java 6的修改
    NAS DIY
    Maven Jetty SSL配置
    图书管理系统(jsp+nysql实现)
    互联网+XX项目技术架构
  • 原文地址:https://www.cnblogs.com/lichihua/p/10241531.html
Copyright © 2011-2022 走看看