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()"
上面的代码是两种方法的集合，可自己删减。
js阻止表单提交的两种方法的更多相关文章
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现表单序列化的两种方法。
function serialize(form) { var parts = [], elems = form.elements, i = , len = elems.length, filed = ...
- form表单提交的几种方法
form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- js阻止表单提交
<!DOCTYPE html><html><head> <title>Simple Login Form</title> < ...
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
- flask表单提交的两种方式
一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...
- ace+validate表单验证（两种方法）
//修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...
- html表单提交的几种方法
原文地址:http://www.ijser.cn/?p=34 最普通最经常使用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” ...
随机推荐
- linux usb installer
其实很简单,手册上有,cp debian....iso /dev/sdc,但是要把sdc上的分区删掉了先. This will only work if it is a hybrid ISO cont ...
- 使用eclipse和JavaFX Scene Builder进行快速构建JavaFX应用程序
http://blog.csdn.net/wingfourever/article/details/7726724 使用eclipse和JavaFX Scene Builder进行快速构建JavaFX ...
- (简单) POJ 2502 Subway，Dijkstra。
Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...
- [Unity]SQLite-C#调用
SQLite数据库-Unity操作 项目开发的时候,经常会遇到的一种需求,数据存储 离线缓存的数据类型很多,大致分成两类 字符串文本数据 多媒体数据 字符串数据的类型只有字符串,但是结构有很多: xm ...
- 获取手机wifi下的网络地址
#import "getIPhoneIP.h" #import <ifaddrs.h> #import <arpa/inet.h> @implementat ...
- HTML学习（四）样式
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表. 实例:例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化.& ...
- AnsiString用法（转）
源:AnsiString用法 //Ansistring 转 char void __fastcall TForm1::Button1Click(TObject *Sender) { AnsiStrin ...
- ucos队列的实现--源码分析
之前说到事件,讲了事件,信号量和互斥信号量,还有一个队列没说,今天说说队列. 队列是用在任务之间传送多个消息的时候,a任务发送消息,b任务发送消息,然后c任务可以依次去提取出b和a传递的消息,不会造成 ...
- jquey插件开发
1.概述 jquery插件开发的主要方法有三种: 1.通过$.extend()来扩展jQuery,即在jQuery命名空间下扩展属性,直接在$对象下调用,不需要再dom下调用,也无法在dom元素下调用 ...
- Ubuntu Linux下设置IP的配置命令
Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...