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” ...
随机推荐
- openstack controller ha测试环境搭建记录（十）——配置neutron（控制节点）
创建neutron用户:mysql -u root -p CREATE DATABASE neutron;GRANT ALL PRIVILEGES ON neutron.* TO 'neutron'@ ...
- CentOS x 64 MooseFS 学习
一.MFS 简介.... MooseFS(Moose File System,mfs)是一种分布式文件系统,它将数据分布在网络中的 不同服务器上,支持FUSE,客户端可以作为一个 普通的Unix 文件 ...
- ASP.NET AJAX注册命名空间
AJAX库支持命名空间的概念. 类可以分组到不同的命名空间.AJAX库会自动创建在此层次中不存在的任何级别的命名空间. <%@ Page Language="C#" Auto ...
- 一元线性回归分析及java实现
http://blog.csdn.net/hwwn2009/article/details/38414911 一元线性回归分析及java实现 2014-08-07 11:02 1072人阅读 评论(0 ...
- (中等) POJ 1703 Find them, Catch them，带权并查集。
Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...
- Android studio中添加外部的jar包
1.下载相关的jar包, 2,将jar包复制到当前module的lib中 3.选择新添加的jar包.右键.add as library 就好啦
- Golang测试技术
本篇文章内容来源于Golang核心开发组成员Andrew Gerrand在Google I/O 2014的一次主题分享“Testing Techniques”,即介绍使用Golang开发 时会使用到的 ...
- coding菜鸟养成记
http://www.cnblogs.com/xdp-gacl/category/563690.html http://www.cnblogs.com/vincent-blog/p/4402327.h ...
- 转：HTTPS 升级指南
上一篇文章我介绍了 HTTP/2 协议 ,它只有在 HTTPS 环境才会生效. 为了升级到 HTTP/2 协议,必须先启用 HTTPS.如果你不了解 HTTPS 协议(学名 TLS 协议),可以参考我 ...
- 2017 ZSTU寒假排位赛 #2
题目链接:https://vjudge.net/contest/147632#overview. A题,状态压缩一下然后暴力即可. B题,水题,略过. C题,有负数,前缀和不是单调的,因此不能用尺取法 ...