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” ...
随机推荐
- Javascript Jquery 中的数组定义与操作_子木玲_新浪博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- (中等) HDU 3335 , DLX+重复覆盖。
Description As we know,the fzu AekdyCoin is famous of math,especially in the field of number theory. ...
- (中等) HDU 1542 Atlantis，扫描线。
Problem Description There are several ancient Greek texts that contain descriptions of the fabled is ...
- iOS的横屏(Landscape)与竖屏(Portrait)InterfaceOrientation
http://www.molotang.com/articles/1530.html 接着上篇写的触摸事件,这次借机会整理下iOS横屏和竖屏的翻转方向支持,即InterfaceOrientation相 ...
- STM32串口寄存器操作（转）
源:STM32串口寄存器操作 //USART.C /************************************************************************** ...
- JNI介绍（转）
源:JNI介绍 JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官在运行Java代码的An ...
- js中的 substring和substr方法
原文: http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html 1.substring 方法 定义和用法 substring ...
- leetcode day5
[242]Valid Anagram: Given two strings s and t, write a function to determine if t is an anagram of s ...
- ZOJ 1108 & HDU 1160 - FatMouse's Speed
题目大意:给你n只老鼠的体重w和速度s,让你找出最长的子序列使得w[i] < w[j] 且 s[i] > s[j] (i < j).求最长序列的长度并输出该序列. LIS(Longe ...
- 今日头条视频Url嗅探
1.打开http://toutiao.com/a6309254755004875010/,查看网页源代码获取videoid = 0425d8f0c2bb425d9361c0eb2eeb4f16 2.拼 ...