下面直接看代码。



    <!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()"

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

js阻止表单提交的两种方法的更多相关文章

  1. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. js实现表单序列化的两种方法。

    function serialize(form) { var parts = [], elems = form.elements, i = , len = elems.length, filed = ...

  3. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  4. 利用JS 阻止表单提交

    情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...

  5. js阻止表单提交

    <!DOCTYPE html><html><head>    <title>Simple Login Form</title>    < ...

  6. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  7. flask表单提交的两种方式

    一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...

  8. ace+validate表单验证（两种方法）

    //修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...

  9. html表单提交的几种方法

    原文地址:http://www.ijser.cn/?p=34 最普通最经常使用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” ...

随机推荐

  1. package。。

    如果在源代码内没有加上 package ... 是无法以下面的方式访问到主类的. D:\lab_>java timer.LambdaTest 加载时会返回 "错误: 找不到或无法加载主 ...

  2. 手机端 H5上传头像

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. ServerSocketChannel

    Java NIO 中的 ServerSocketChannel 是一个可以监听新进来的 TCP 连接的通道, 就像标准 IO 中的 ServerSocket 一样.ServerSocketChanne ...

  4. iOS开发——代理与block传值

    一.代理传值的方法 1.Hehe1ViewController.h中 #import <UIKit/UIKit.h> @protocol Hehe1ViewControllerDelega ...

  5. Memcached源码分析之slabs.c

    #include "memcached.h" #include <sys/stat.h> #include <sys/socket.h> #include ...

  6. 功率W与dBm的对照表及关系（转）

    源:功率W与dBm的对照表及关系 功率W与dBm的对照表 dBm          Watts                          dBm            Watts  0     ...

  7. mongodb学习(一)

    重点是踏出第一步: 1. 各种资料集合,mongodb的介绍,安装,破解...内容大同小异... http://www.cnblogs.com/kuochin/p/3599630.html;http: ...

  8. dom对象中的this和event.target区别

    1.this是事件冒泡,动态变化.先触发内部事件,由内到外的执行. <script> function testdiv(val){ console.log(val.id); } funct ...

  9. [题解]bzoj 1861 Book 书架 - Splay

    1861: [Zjoi2006]Book 书架 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 1396  Solved: 803[Submit][Stat ...

  10. linux mint运行docker

    1,sudo apt-get install docker.io 或者sudo apt-get install docker* 2,安装好之后 sudo docker -d 启动进程提示: yimiy ...