阻止form表单submit提交

爱被打了一巴掌 2021-09-26 05:34 476阅读 0赞

近日在做项目的时候部分需要用到表单验证，原本想用插件进行验证的，结果发现只需要验证一个地方，就想自己用js写一下，过程中发现一个问题，在验证错误的时候需要点击submit时无法提交，这边就这个问题进行说明一下。

功能说明：

1.为空时，提交的时候会进行提示且无法提交。

2.名字长度不符时，失去焦点时会提示。

3.会检测后台数据库，看相册命名是否重复。

4.以上提示在提交表单时如果不符合，均会进行提示

## html： ##

<form id="mayform" class="form" action="<c:url value='/pet/createAlbum'/>" method="post">
    			<div class="form_div">
    				<div class="album_name">相册名：<input type="text" class="albumName" name="albumName" placeholder="输入相册名称"></div>
    				<br/>
    				<br/>
    				
    				<div class="album_kind">
    					类　型：
    					<select name="kind">
    						<option value="humanity">人文</option>
    						<option value="pet">宠物</option>
    						<option value="memory">回忆</option>
    						<option value="view">风景</option>
    					</select>
    				</div>
    				<br>
    				<br>
    				<div class="submit"><input id="submit" type="submit" value="创建相册"></div>
    			</div>
    		</form>

## JS： ##

<script type="text/javascript">
    	$(function(){
    	 reg_albumName=/^.{2,20}$/gi;//g表示全局
    	 var msg="";
    	 var submitBtn = document.getElementById("submit");
    	 var bool=0;//0代表为NULL；1代表成功；2代表相册名存在;3代表名字不符合
    	$(".albumName").blur(function(){
    		bool=false;
    		var _html="<span id='errormsg' style='font-size:12px;color:red;'>验证成功</span>";
    		var albumName=$(this).val();
    		$(".albumName").parent().next("#errormsg").remove();
    		if(reg_albumName.test(albumName)){
    			$.post("validAlbumName",{
    				albumName:albumName
    			},function(data){
    				if(data=="success"){
    					bool=1;
    					$(".albumName").parent().after(_html);
    				}else {
    					bool=2;
    					_html="<span id='errormsg' style='font-size:12px;color:red;'>该相册名已存在，请重新命名</span>";
    					
    					$(".albumName").parent().after(_html);
    				}
    			});	
    		}else {
    			bool=3;
    			_html="<span id='errormsg' style='font-size:12px;color:red;'>长度必须为2-20个字符</span>";
    			$(".albumName").parent().after(_html);
    		}
    	});
    	submitBtn.onclick = function (event) {
    		$(".albumName").parent().next("#errormsg").remove();
    		  if(bool!=1)
    		  {
    			  if(bool==0)
    			 $(".albumName").parent().after("<span id='errormsg' style='font-size:12px;color:red;'>相册名不能为空</span>");
    			  if(bool==2)
    				  $(".albumName").parent().after("<span id='errormsg' style='font-size:12px;color:red;'>该相册名已存在，请重新命名</span>");
    			  if(bool==3)
    				  $(".albumName").parent().after("<span id='errormsg' style='font-size:12px;color:red;'>长度必须为2-20个字符</span>");
    	  		return false;
    	  		}
    		  else return true;
    		 };
    	}); 
    	
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 html中form表单提交和阻止表单提交的细节

[如何阻止表单提交][Link 1] [HTML禁止表单提交方法][HTML] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

朱雀/ 2022年11月25日 00:35/ 0 赞/ 828 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 424 阅读

相关关于form.submit()不能提交表单的错误原因

来源：[http://www.ido321.com/948.html][http_www.ido321.com_948.html] 直接上代码把： 1: <d

灰太狼/ 2022年08月13日 03:30/ 0 赞/ 192 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:42/ 0 赞/ 368 阅读

相关 onsubmit=return false阻止form表单提交javascript

return false 阻止表单提交不起今天这个问题困扰了我很久，在网上找了很多资料，基本上关于οnsubmit=return false有以下几点要注意的地方： 1

骑猪看日落/ 2022年07月12日 14:28/ 0 赞/ 250 阅读

相关 onsubmit=return false阻止form表单提交javascript

return false 阻止表单提交不起今天这个问题困扰了我很久，在网上找了很多资料，基本上关于οnsubmit=return false有以下几点要注意的地方： 1

小咪咪/ 2022年07月12日 14:28/ 0 赞/ 241 阅读

相关阻止form表单提交按钮的默认 action

$(document).ready(function(){ $("form").submit(function(e){ e.preven

川长思鸟来/ 2022年06月11日 05:58/ 0 赞/ 264 阅读

相关提交Form表单,submit之前做js判断处理

原文地址：[https://blog.csdn.net/m\_nanle\_xiaobudiu/article/details/79667661][https_blog.csd

旧城等待，/ 2022年05月12日 07:08/ 0 赞/ 257 阅读

相关 javascript阻止form表单自动提交的方法

JavaScript中，阻止form表单自动提交的方法有两种：（1）使用preventDefault() 在标准浏览器中，阻止浏览器自动提交form表单的默认行为

女爷i/ 2021年12月04日 02:49/ 0 赞/ 720 阅读

相关阻止form表单submit提交

近日在做项目的时候部分需要用到表单验证，原本想用插件进行验证的，结果发现只需要验证一个地方，就想自己用js写一下，过程中发现一个问题，在验证错误的时候需要点击submit时无法

爱被打了一巴掌/ 2021年09月26日 05:34/ 0 赞/ 477 阅读