Ajax表单验证失败后，阻止表单提交（jQuery）

最新推荐文章于 2022-04-23 23:44:34 发布
置顶 最新推荐文章于 2022-04-23 23:44:34 发布
阅读量2k 收藏 4
点赞数 1
分类专栏： javaweb jQuery Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42444651/article/details/89434678
版权

Ajax表单验证失败后，阻止表单提交（jQuery）

HTML界面

'<form action="/WangYiYun/PhoneLogin" id="login_form" class="phone_login_form">' + 
	'<input type="text" id="phone" placeholder="请输入手机号" required="required" pattern="1[3|5|7|8][0-9]{9}"/>'+
	'<input type="password" id="password" placeholder="请输入密码" required="required" />'+
	'<p id="phoneDiv"></p>'+
	'<input type="button" id="phone_login_button" value="登&nbsp;&nbsp;&nbsp;&nbsp;录">'+
'</form>';

首先，要给表单form标签定义id，方便jQuery找到表单元素，里面的提交按钮属性type一定不能为submit。
action是表单提交的地址

jQuery Ajax验证代码


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  java奋斗生
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Jquery表单验证失败后不提交的解决方法

				
			

			

				

					10-21
				

			

		

		

			
				
很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。

			
		

	



                

              
                



	

		

			

				
					
jquery+ajax验证不通过也提交表单问题处理

				
			

			

				

					12-12
				

			

		

		

			
				
validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:
1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.
2 使用ajax提交表单,但是没有使用ajax验证.
         这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:
 代码如下:
//验证不通过时return  
    if(!$(“form#ajaxForm”).validationEngine(“validate”)) return ;  
    $.ajax(

			
		

	



                


  
              

                


	

		

			

				
					
ajax阻止提交表单,如果用户名不可用，jquery ajax会阻止表单提交

				
			

			

				

					weixin_34816557的博客
				

				

					08-05
					
					346
					
				

			

		

		

			
				
我正在使用此脚本来检查用户名可用性，它可以工作，但即使用户名不可用，表单也会提交。我试图使用event.preventdefault，但是，我不知道如何正确使用它我怎样才能防止表单被提交？如果用户名不可用，jquery ajax会阻止表单提交function checkAvailability() {$("#loaderIcon").show();jQuery.ajax({url: "check_...

			
		

	





	

		

			

				
					
前端form表单进行ajax验证 不提交

				
			

			

				

					qq_40010745的博客
				

				

					06-29
					
					1556
					
				

			

		

		

			
				
var validateForm;
	function doSubmit(){//回调函数，在编辑和保存动作时，供调用提交表单时进行验证。
	  if(validateForm.form()){
		  var flag=false;
		  if(!$("#id").val()){
			  $.ajax({
					type : "post",
					url : "${ctx}/core...

			
		

	



		

			
		



	

		

			

				
					
jQuery使用$.ajax提交表单完整实例

				
			

			

				

					11-23
				

			

		

		

			
				
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考，具体如下： 首先，新建Login.html页面：  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

			
		

	





	

		

			

				
					
jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

				
			

			

				

					10-19
				

			

		

		

			
				
对于 jQuery Validator 验证异步提交的表单，我们可以监听表单的提交事件，然后在验证成功后使用 Ajax 进行提交。以下是一个示例：  ```javascript $("#leaveSave").validate({  onsubmit: true,  onfocusout: false...

			
		

	





	

		

			

				
					
jQuery ajaxSubmit 实现ajax提交表单局部刷新

				
			

			

				

					10-22
				

			

		

		

			
				
要使用`ajaxSubmit`，首先需要引入`jquery-form.js`库，这是一个jQuery插件，提供了对表单的增强支持，包括AJAX提交。以下是一个基本的`ajaxSubmit`使用示例：  ```javascript $(document).ready(function() {  var ...

			
		

	





	

		

			

				
					
Jquery submit 不提交

				
			

			

				

					Angus_w的专栏
				

				

					08-27
					
					912
					
				

			

		

		

			
				
id="form" method="get">  type="text" name="q" value="test"/> type="button" id="submit">查询 type="text/javascript">$(function(){	$('#submit').click(function(){		$('#form').submit()	})})
上述代码看上去貌似没什么问题，

			
		

	





	

		

			

				
					
JQuery实现表单验证并使错误数据其无法提交到数据库

				
			

			

				

					weixin_46019681的博客
				

				

					04-23
					
					2148
					
				

			

		

		

			
				
在项目开发的时候，我们经常要对用户传入数据库的表单数据进行验证，例如注册时候的账号密码，而验证分为前端验证与后端验证，能在前端完成的验证工作就不要让后端插手了。

本篇笔记以修改密码为例子，界面如下：



密码表单的 html代码，设置好id：


<input id="userpass" name="user.password" value="#(user.password??)" required>



在同一个html文件下，添加jquery代码：


<script>
$

			
		

	





	

		

			

				
					
阻止表单submit提交（在提交之前做验证及判断）

					
热门推荐

				
			

			

				

					冬哥的博客
				

				

					04-27
					
					1万+
					
				

			

		

		

			
				
说明：在工作中遇到表单提交之前，需要验证用户输入的是否为空，之前使用ajax做提交，在js里面直接做判断，如果用户输入为空则弹出提示框（起初默认是隐藏的，非alert弹出框），让用户重新输入，当输入框获取焦点的时候，弹出的提示框隐藏。



1.原理：



onsubmit 函数名（）

在表单的标签里面加入 onsubmit标签

&lt;form  method="post"onsubmit...

			
		

	





	

		

			

				
					
【JQuery】页面关闭时使用JQuery进行Ajax请求

				
			

			

				

					michiko98的博客
				

				

					10-19
					
					1320
					
				

			

		

		

			
				
目前测试发现，jquery对unload事件支持较好，页面刷新或关闭时，都能触发unload事件。


$(window).bind('unload', function(){
	console.log('unload');//页面刷新、关闭都会触发该事件
});

jquery对于beforeunload事件，仅在页面刷新时可以触发，在页面关闭时，未触发。


$(window).bind('beforeunload', function(){
	console.log('beforeunload');/

			
		

	





	

		

			

				
					
验证控件,解决用于ajax提交前的验证，不是submit提交的验证

				
			

			

				

					Blog@wp
				

				

					07-03
					
					1690
					
				

			

		

		

			
				
原文地址：http://www.cnblogs.com/feiyun126/p/3356365.html




//解决ajax提交前的验证问题，主要用于onclick事件时对某一区域中(可以是form,div,table中的等)控件的验证。
(function ($) {
    var v;

    //Create a new Validator instance for jQ

			
		

	





	

		

			

				
					
html停止所以ajax请求,教你如何终止JQUERY的$.AJAX请求_jquery

				
			

			

				

					weixin_26968079的博客
				

				

					06-23
					
					220
					
				

			

		

		

			
				
最近遇到，如果用户频繁点击ajax请求，有两个问题：1，如果连续点击了5个ajax请求，前4个其实是无效的，趁早结束节省资源。2，更严重的问题是：最后一个发送的请求，响应未必是最后一个，有可能造成混乱。还需要一个队列来维护发送的请求和响应。我其实已经设计好了该队列的实现方式，后来发现jQuery直接通过abort方法，这样就不需要那么复杂的实现了，毕竟还有其他事情等着完成。用jquery发送aja...

			
		

	





	

		

			

				
					
jquery ajax 表单提交被浏览器拦截解决办法

				
			

			

				

					
				

				

					01-16
					
					395
					
				

			

		

		

			
				
通常jquery的submit表单提交是不会被拦截的，但是用jquery ajax异步提交是会被拒绝的，既然是异步提交造成的问题，那就好解决了，因为jquery ajax方法提供了参数选项：
async ：true, 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。


转载于:ht...

			
		

	





	

		

			

				
					
ajax阻止表单提交

				
			

			

				

					杏杏杏妹子的博客
				

				

					01-04
					
					4794
					
				

			

		

		

			
				
function aaa(){
var ok = true;
$.ajax({
url:"xinxi/ispwd",
async: false,
dataType:"json",
success:function(resp){
$("#error").text(resp.error);
ok= false;
}
});
if(ok=true){
return true; 


			
		

	





	

		

			

				
					
ajax提交时候校验表单方法

				
			

			

				

					jattxgt的博客
				

				

					06-12
					
					2069
					
				

			

		

		

			
				
方法一：

代码示例：

巧妙设计之处：ajax提交的话，不能够进行校验拦截，设置一个flag来判断，很巧妙的设计之处，故收藏！


	function inserts(){
		var flag = checkForm();
		if (flag == false) {
			return;
		}
		$.ajax({
	         //几个参数需要注意一下
	            ...

			
		

	





	

		

			

				
					
jquery表单验证提交

					
最新发布

				
			

			

				

					11-29
				

			

		

		

			
				
以下是一个简单的jQuery表单验证和提交的例子：  ... ... ...在提交表单时，我们通过`event.preventDefault()`阻止了默认的表单提交行为，并在验证通过后调用`submitForm()`函数提交表单。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值