JS阻止表单submit提交（在提交之前做验证及判断）
在工作中遇到表单提交之前，需要验证用户输入的是否为空，之前使用ajax做提交，在js里面直接做判断，如果用户输入为空则弹出提示框（起初默认是隐藏的，非alert弹出框），让用户重新输入，当输入框获取焦点的时候，弹出的提示框隐藏。
1.原理：onsubmit 函数名（）
在表单的标签里面加入 onsubmit标签
在form中加上：
<form method="post"onsubmit="return checkip()">正文代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="post"onsubmit="return checkip()">
<label class='lab' for="exampleInputName2">start_time</label>
<input type="datetime-local" class="form-control startTimewater" id="exampleInputName2" name="start_time">
<label class='lab' for="exampleInputEmail2">end_time</label>
<input type="datetime-local" class="form-control endTimewater" id="exampleInputEmail2" name="end_time">
<button type="submit" class="btn btn-info btn-search" id="submit">提交</button>
</form>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function checkip() {
var start_time_water = $('#exampleInputName2').val()
var end_time_water = $('#exampleInputEmail2').val()
if (start_time_water=="" || end_time_water==""){
alert('请输入正确的格式，时间不能为空！')
return false;
}
else{
return true;
}
}
</script>
</html>return false ：表单不提交；return true；表单提交。在return false 做操作，判断，条件满足则提交，条件不满足，不提交。
在用户提交空的时候，会弹出提示框。
参考文章：
阻止表单submit提交（在提交之前做验证及判断）
https://blog.csdn.net/weixin_40933787/article/details/80110207
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-07-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
