在提交或阻止提交表单之前，如何使用jquery .defer或.done验证表单(使用非侵入性)
在提交或阻止提交表单之前，可以使用jQuery的.defer()或.done()方法来验证表单。这两个方法都是用于处理异步操作的回调函数。
使用.defer()方法验证表单时，可以将验证逻辑封装在一个函数中，并使用.defer()方法将该函数添加到一个延迟对象中。然后，可以使用.done()方法来指定在验证完成后执行的回调函数。如果验证通过，可以在回调函数中继续执行表单的提交操作；如果验证不通过，可以在回调函数中阻止表单的提交。
以下是一个示例代码：
$(document).ready(function() {
// 表单提交事件
$('form').submit(function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 创建一个延迟对象
var deferred = $.Deferred();
// 表单验证函数
function validateForm() {
// 执行表单验证逻辑
var isValid = true; // 假设表单验证通过
// 如果表单验证不通过，将isValid设置为false
// 返回验证结果
return isValid;
}
// 将验证函数添加到延迟对象中
deferred.done(validateForm);
// 执行延迟对象的回调函数
deferred.done(function() {
// 如果表单验证通过，继续提交表单
$('form').off('submit').submit();
});
// 执行延迟对象的回调函数
deferred.fail(function() {
// 如果表单验证不通过，阻止提交表单
console.log('表单验证不通过');
});
// 执行延迟对象的回调函数
deferred.resolve();
});
});在上述示例代码中，我们首先创建了一个延迟对象deferred，然后将验证函数validateForm添加到延迟对象中。在延迟对象的.done()方法中，我们执行了表单的提交操作；在延迟对象的.fail()方法中，我们阻止了表单的提交操作。最后，通过调用延迟对象的.resolve()方法，触发了延迟对象的回调函数。
需要注意的是，上述示例代码中的表单验证逻辑仅作为示例，实际应用中需要根据具体需求进行修改和完善。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数计算（Serverless）：https://cloud.tencent.com/product/scf
- 腾讯云API网关：https://cloud.tencent.com/product/apigateway
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
- 腾讯云音视频处理：https://cloud.tencent.com/product/mps
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-meta-universe
相关·内容
1回答
jQuery.Deferred.prototype.then:返回一个行为我不明白的对象
javascript、jquery、jquery-deferred
我在使用jQuery.Deferred.prototype.then时遇到了问题，所以我决定查看jQuery的测试套件，以检查我是否正确地理解了这种方法的行为。与我的问题最相关的测试是3.2.1版中的以下内容：
注意：
Deferred对象在第153行上被拒绝。
第144和164行调用done。我不太熟悉QUnit，但我很清楚，除非传递给done的回调被实际执行，否则测试将失败。
传递给done的回调应该在Deferred对象被解析，而不是拒绝的情况下执行。(这就是我对Deferred 的理解。)
但以上3点并不都是正确的！
对done的两个调用都是在jQuery.Def
浏览 3提问于2017-12-12得票数 1
回答已采纳
3回答
使用具有私有动态调用函数的延迟对象(显示模式)
javascript、jquery、function、private、deferred
我试图使用私有动态调用函数延迟的jQuery，如下所示：
var module = (function(){
var privateFuncs = {
privateMethod: function(val) {
console.log(val);
}
};
var success = function() {
console.log('Success');
};
var publicMethod = function() {
var functi
浏览 3提问于2013-06-27得票数 0
回答已采纳
1回答
返回延迟对象或null
javascript、jquery
我有一个函数来提交一些数据。根据某些布尔值的状态，我可能不想提交这些数据。但是，调用方总是期望一个延迟对象作为返回值来检查.done()或.fail()。似乎您不能在预期已完成/失败时返回null或不返回任何内容(这是有意义的)，因此我不知道如何从这个异步调用返回。
我可以黑进$.Deferred对象并立即解析/返回它，但这似乎是错误的设计。我不能改变这里的调用方法。
如果不使用延迟对象，如何返回满足.done()或.fail()的延迟对象或其他返回值？
function foo(a) {
bar(a).done(function () {
console.log(&#
浏览 0提问于2015-09-09得票数 1
回答已采纳
1回答
如果延迟的问题已经解决，那么jquery延迟回调是否同步？
jquery、asynchronous、promise、jquery-deferred
我猜答案是肯定的，但密码并不容易破译。在里写着
添加到带有deferred.then()、deferred.always()、deferred.done()或deferred.fail()的对象的任何回调都将排队等待稍后执行。调用deferred.resolve()或deferred.resolveWith()将延迟转换为已解析状态，并立即执行设置的任何doneCallbacks。
但是，这并没有显式地涵盖将回调附加到已经解析的延迟推断的情况。
浏览 2提问于2014-03-25得票数 3
回答已采纳
1回答
Jquery .done()行为
javascript、jquery、ajax
我想知道下面代码的行为。Ajax.chan(tid)是下面找到的ajax调用。其他三个函数与Ajax无关。当我不将参数传递给Display.channelLoad时，代码按预期工作，这些函数在ajax完成后运行。但是如果我将其更改为.done(Display.channelLoad())，则该函数将在ajax调用完成之前运行。这可能是我缺少的一些基本的javascript知识，但我想将一个参数传递给Display.channelLoad，并了解这里发生的事情。
AjaxCall.chan(tid).done(List.articles)
.done(Disp
浏览 2提问于2014-06-24得票数 1
回答已采纳
1回答
我在尝试理解两者的区别
$.when(...).then(...)
$.when(...).done(...)
在jQuery中。据我所知，它们都是在对象加载完成时执行的。但有什么不同呢？我们将会非常感谢你的例子。
浏览 0提问于2013-01-10得票数 28
回答已采纳
1回答
停止事件继续在deferred.reject上
javascript、jquery、ajax、promise、deferred
希望你们中有人能帮我解决这个问题。
我有几个导航链接在我的应用程序之上，它具有活动状态和非活动状态。理论上，我想从一个跳到另一个，如果存在一个不完整/有效的表单，我会触发验证错误并保持在同一个页面上。在我的例子中所发生的是表单验证工作良好，但是顶部的导航链接从非活动状态更改为活动状态，无论单击哪个。
我有一个ValidateForm函数，它验证并提交表单，如果它是有效的，否则它返回deferred.reject()；
function ValidateForm(submitAnyway) {
var deferred = $.Deferred();
var form = $(&
浏览 1提问于2017-03-24得票数 0
回答已采纳
1回答
我可以使用jQuery的Deferred.promise()替换对象的现有承诺吗？
jquery、jquery-deferred
根据jQuery文档为deferred.promise([target])
如果提供了目标，deferred.promise()将把方法附加到它上，然后返回这个对象，而不是创建一个新的对象。这对于将许诺行为附加到已经存在的对象可能很有用。
据我所知，在目标上调用promise()应该取代目标的现有承诺接口，在这种情况下，我希望下面的内容能够记录"new done"
var defer = $.Deferred();
defer.done(function() {
console.log('new done')
});
defer.promi
浏览 3提问于2013-02-23得票数 1
回答已采纳
4回答
理解"this“关键字
javascript、jquery
有一个变化我无法解释
deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );
变成了
deferred.done( arguments ).fail( arguments );
，当您调用一个函数作为某个对象(如obj.func() )的成员时，函数内部的this被绑定到obj，因此通过apply()调用函数只是为了将this绑定到obj是没有用的。相反，根据评论，这是必需的，因为之前的一些$.Callbacks.add实现。
我的疑问不在于jQuery，而在于Javascript语言本身:当您
浏览 15提问于2012-06-25得票数 16
回答已采纳
3回答
如何添加自定义Javascript到asp.net客户端原因验证函数？
asp.net、validation、client-side-validation
我有一个asp.net网站，上面有几个验证控件：
<div class="form-row">
<label>Email</label>
<asp:TextBox ID="txtUserName1" runat="server" onchange="validate(this)"> </asp:TextBox>
<asp:RequiredFieldValidator ID="reqUserNam
浏览 0提问于2011-03-29得票数 0
回答已采纳
2回答
如何使用$q.all跨多个异步函数处理$http.get的结果
javascript、promise、q、angular-promise
我有一个从$http.get返回的对象数组，我需要对这些对象执行三个不同的自动发布进程。我相信我可以使用$q.all并行执行post进程。
我看到了大量使用$timeout/setTimeout的示例，它们遵循以下模式：
function doSomethingAsync() {
var deferred = $q.defer();
setTimeout(function() {
deferred.resolve('hello world');
}, 500);
return deferred.promise;
}
doSo
浏览 3提问于2014-09-08得票数 1
回答已采纳
1回答
jquery在调用.done之前不等待
javascript、jquery、google-chrome-extension
我使用defer的.done来等待cookie在函数完成之前被加载。当我尝试运行代码时，它完成并返回undefined。看起来在第一个代码完成之前，.done就已经启动了。
function getCookie(cookieName){
var value;
var defer = new jQuery.Deferred();
fetchCookie().done(
function(){
return value;
}
);
function fetchCookie(){
chro
浏览 0提问于2011-06-30得票数 0
回答已采纳
1回答
用jQuery返回AJAX承诺的结果
javascript、jquery、return-value、promise
有人能解释一下为什么在下面的示例中foo()返回整个承诺而不是仅仅返回数据吗？以及如何使foo()只返回数据？
var foo = function() {
var promise = $.ajax({
type: 'POST',
url: 'http://example.com'
})
return promise.done(function(data) {
return data
})
}
console.log(foo())
谢谢!
浏览 1提问于2014-03-28得票数 6
1回答
将history.block与异步函数一起使用/回调/异步/等待
reactjs、async-await、react-router、react-router-dom、formik
我在路由中有一个表单，如果有任何验证错误，它应该不允许用户导航到另一个路由。如果没有验证错误，则允许导航到另一条路线。
下面是我当前的代码，onBlock函数无法使用它的异步特性，因为提交和验证表单的函数是异步的。
FormComponent.js
import React, { useState, useEffect, useRef } from "react";
import { FieldArray } from "formik";
import { useHistory } from "react-router-dom";
import
浏览 68提问于2021-03-08得票数 3
回答已采纳
2回答
“返回deferred.promise(this)”是返回未定义的
javascript、jquery、jquery-deferred
如果我使用超时解决3秒后延迟的问题，下面的代码可以工作，如下所示.
var myConstructor = function(){
var deferred = $.Deferred();
this.message = "yo";
setTimeout(function(){
deferred.resolve();
}, 3000);
return deferred.promise(this);
}
var myObj = new myCons
浏览 3提问于2014-09-24得票数 1
回答已采纳
3回答
Jquery -如何推迟事件的默认行为？
jquery、forms、preventdefault
我有处理表单的提交事件的函数。
我想在处理程序中做的是推迟默认行为，直到Ajax函数完成运行。
示例代码
$("#some_form").on("submit", function(event){
// Defer default event behavior
// Do some ajax function with a callback function to run
// after it is finished as an argument
ajaxFunction(function(){
// Do s
浏览 0提问于2013-01-04得票数 0
11回答
如何使用jQuery deferred？
javascript、jquery、jquery-deferred
jQuery 1.5引入了新的延迟对象和附加方法、和。
对于那些以前没有使用过.Deferred的人，我对进行了注释。
这些新方法的可能用途是什么?我们如何将它们适合于模式？
我已经读过和了，所以我知道它是做什么的。我的问题是，我们如何在日常代码中使用这些新功能？
我有一个简单的buffer类的，它按顺序调用AJAX请求。(下一个在前一个结束后开始)。
/* Class: Buffer
* methods: append
*
* Constructor: takes a function which will be the task handler to be called
*
浏览 5提问于2011-02-02得票数 281
回答已采纳
1回答
jQuery推迟了在chrome和safari上的工作吗？
javascript、jquery、html、canvas
我想要画布标签上的drawImage，然后再次保存它。我使用的是jQuery的deferred.done()。
下面是我使用的代码：
function save_submit() {
LoadDraw().done(function(){
var canvas = document.getElementById('touchpaint');
var ctx = canvas.getContext('2d');
var image = canvas.toDataURL();
});
var LoadDraw =
浏览 1提问于2013-10-23得票数 0
3回答
我可以在JavaScript Q库中做出同步承诺吗？
javascript、q
我想做一些类似以下的事情：
delay( 2500 )
.then( function () { console.log( "Step 1 done" ) } )
.then( delay( 7500 ) )
.then( function () { console.log( "Step 2 done" ) } );
因此，以前已经多次演示过延迟的实现：
function delay( ms ) {
var deferred = Q.defer();
setTimeout( deferred.resolve, ms );
return d
浏览 0提问于2013-06-20得票数 15
回答已采纳
3回答
jQuery Deferred.then - failFilter参数
javascript、jquery、promise、jquery-deferred
我正试图把我的注意力集中在jQuery延迟/承诺(使用v1.8+)上。
通过阅读文档，$.Deferred.then(...)方法接受一个doneFilter和一个failFilter作为要执行的参数，并且它返回一个承诺，我们可以用它来链接如下：
function doDefer() {
var $defer = $.Deferred();
doSomethingAsynchronous(
function () {
$defer.resolve();
},
function () {
浏览 3提问于2015-12-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
