在工作中遇到表单提交之前,需要验证用户输入的是否为空,之前使用ajax做提交,在js里面直接做判断,如果用户输入为空则弹出提示框(起初默认是隐藏的,非alert弹出框),让用户重新输入,当输入框获取焦点的时候,弹出的提示框隐藏。
在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>
在用户提交空的时候,会弹出提示框。
参考文章:
阻止表单submit提交(在提交之前做验证及判断)
https://blog.csdn.net/weixin_40933787/article/details/80110207