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” ...
随机推荐
- NSMutableDictionary
NSDictionary *dic = @{@"name":@"yj", @"age":@"24", @"ho ...
- 关于bool和BOOL的区别
1.类型不同: BOOL是int类型,bool是布尔类型 2.长度不同: BOOL长度是其环境来定,一般是4个字节,因为其是int类型;bool长度为一个字节 3.取值不同: BOOL取值是FALSE ...
- xcode磁盘大清理
转---Xcode磁盘空间大清理 我的设备是Macbook Air 13’ Mid 2011,128G SSD.最近开始有些存储压力了,用Clean My Mac清理一部分旧文件后,决定对Xcode ...
- 基于Apache搭建Nagios图形监控
基于apache 的稍微简单一点么?实验一下子就OK了... 环境: System: [root@losnau etc]# cat /etc/issueRed Hat Enterprise Linux ...
- 跳舞链 Dancing Links
作为搜索里面的一个大头,终于刷了一部分题目了,跳舞链一般都有现成的模板来套...... 至于跳舞链的学习的话,我觉得http://www.cnblogs.com/grenet/p/3163550.ht ...
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...
- STM32硬件IIC操作
Stm32具有IIC接口,接口有以下主要特性 多主机功能:该模块既可做主设备也可做从设备 主设备功能 C地址检测 位/10位地址和广播呼叫 支持不同的通讯速度 状态标志: 发送器/接收器模式标志 字节 ...
- X-008 FriendlyARM tiny4412 uboot移植之copy u-boot到DDR内存
<<<<<<<<<<<<<<<<<<<<<<<<< ...
- Word中的公式向上偏或向下偏的解决方法
在word 2010中,发现公式无法与文字排成一行时,可选中文字,然后点“字体”,然后“高级”选项中选择“位置”,然后根据不同情况选择“标准”.“提升”.“降低”.
- iOS 界面 之 EALayout 无需反复编译，可视化实时界面，告别Storyboard AutoLayout Xib等等烦人的工具
http://blog.csdn.net/fatherhui iOS开发,EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具 EALa ...