下面直接看代码。



    <!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. Bar Chart of Frequency of modals in different sections of the Brown Corpus

    Natural Language Processing with Python Chapter 4.8 colors = 'rgbcmyk' # red, green, blue, cyan, mag ...

  2. selenium 多线程

    http://www.cnblogs.com/dingmy/p/3438084.html

  3. 初步了解php，实现注册及登录

    直接上图(数据库是用wamp实现的) 注册页 html 及 php 代码 登陆页 html 及 php 代码

  4. ucos事件邮箱信号量队列详解

    Ucos的事件分为时钟,信号量,互斥性信号量,消息队列,以及消息邮箱 首先说信号量 信号量在ucos中的类型定义为OS_EVENT_TYPE_SEM,在任务控制块ecb中,主要是用到的是信号量计数器O ...

  5. displayport-2

    上一章讲述了display-port的硬件连接,今天来说说协议层 图中可以看到,最底层是物理层,上层是连接服务层,提供的服务包括同步数据传输服务,aux链接服务,aux设备数据传输服务,在设备端也一样 ...

  6. AngularJS 讲解,四 Directive

    AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致 ...

  7. css（四）-- 盒子模型和定位

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(mar ...

  8. Session保存到指定数据库中

    方法1:向数据库中添加session相关信息,可以使用官方工具 命令提示符cmd中执行: cd C:\Windows\Microsoft.NET\Framework\v4.0.30319       ...

  9. css强制折行和隐藏超出部分

    一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whit ...

  10. 请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库

    转载请使用支持 JDBC 4.0 的 sqljdbc4.jar 类库 1.下载最新的JDBC(2012/3/6) http://www.microsoft.com/downloads/zh-cn/de ...