zoukankan      html  css  js  c++  java
  • js阻止表单提交的两种方法

    下面直接看代码。

    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script>
                function checkLength(){
                    var name=document.getElementById('user').value;
                    if(name.length<5){
                        console.log(name);
                        return false;
                    }else{
                        return true;
                    }
                }
                window.onload=function(){
                    var mysubmit=document.getElementById('submit');
                    mysubmit.onclick=function(event){
                        var name=document.getElementById('user').value;
                        if(name.length<5){
                            event.preventDefault();
                        }else{
    
                        }
                    }
                }
            </script>
        </head>
        <body>
            <form action="clock.html" method="post" onsubmit="return checkLength()">
                <p>name:<input type="text" name="user" id="user"></p>
                <input type="submit" id="submit" name="submit"> 
            </form>
        </body>
        </html>
    
    

    clock.html是我自己的一个时钟页面。

    先看第一种方法:利用event的阻止默认事件机制,页面载入之后获得submit元素,然后为submit注册click响应函数,参数为event事件。

    在用户点击submit触发响应函数后,直接event.preventDefault();阻止表单转跳的默认事件。

    第二种方法:在表单form标签下属性onsubmit="return checkLength()"或 id="submit"的input标签下添加属性onclick="return checkLength()"

    上面的代码是两种方法的集合,可自己删减。

    木呆先生:人本木生、有口亦呆。
  • 相关阅读:
    jqgrid 获取选中用户的数据插入
    jqgrid 自定义文本框、选择框等查询
    Java学习—— for循环
    Android中 Http请求
    异步消息处理机制——Handler用法
    ThreadLocal
    Android开发 学习笔记——HelloWorld
    eclipse 常用插件
    mysql 命令备份还原
    学习
  • 原文地址:https://www.cnblogs.com/daocoder/p/6375289.html
Copyright © 2011-2022 走看看