首页 > 其他分享 >form的submit阻止表单提交

form的submit阻止表单提交

时间:2023-08-11 10:15:24浏览次数:43  
标签:function form btnSubmit preventDefault submit 表单 阻止

1. return false 方法

<form onsubmit="return onFormSubmit(this)"></form> //能阻止

<form onsubmit="onFormSubmit(this)"></form> //不能阻止
function onFormSubmit(form){
    return false;
}

2. preventDefault

preventDefault可在判断中使用,按条件阻止

//能阻止
<form onsubmit="onFormSubmit(event)"></form> 
function onFormSubmit(e){
    e.preventDefault();
}

//form表单的提交事件可阻止
form.addEventListener('submit', e => {
    e.preventDefault();
})

//提交按钮的click方法preventDefault可阻止
let btnSubmit = document.getElementById('btnSubmit');
btnSubmit.onclick = function(e){
    let name = document.getElementById('user').value;
    if(name.length < 5){
        e.preventDefault();
    }
    else{

    }
}

 

标签:function,form,btnSubmit,preventDefault,submit,表单,阻止
From: https://www.cnblogs.com/mengff/p/17622306.html

相关文章

  • vue 实现动态表单点击新增 增加一行输入框
    点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行<el-col:span="12"class="mb20"> <el-form-item :label="index==0?'选择原材料':''" v-for="(item,index)inform.productItemList"......
  • Winform跨线程访问UI
    在开发winfrom应用时,经常遇到异常:System.InvalidOperationException:“线程间操作无效:从不是创建控件“xxxx”的线程访问它。出现这个异常的原因是创建这个UI的线程,和当前访问这个UI的线程不会是同一个。Winform为了防止线程不安全,因此对这个跨线程访问抛出异常,禁止这个操作。......
  • 【Oracle】 insert performance issue
    https://blog.iarsov.com/oracle/insert-statement-taking-long-time/--->https://blog.iarsov.com/oracle/sequences-cache-nocache/......
  • VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示
    上代码<el-form-itemlabel="出库单号"prop="ecode"ref="ecode":rules="rules.ecode"><el-inputv-model="queryParams.ecode"placeholder="出库单号和出库箱号至少填写一项"clearable......
  • Windows11安装python模块transformers报错Long Path处理
    Windows11安装python模块transformers报错,报错信息如下ERROR:CouldnotinstallpackagesduetoanOSError:[Errno2]Nosuchfileordirectory:'C:\\Users\\27467\\AppData\\Local\\Packages\\PythonSoftwareFoundation.Python.3.11_qbz5n2kfra8p0\\LocalCac......
  • element 表单规则所有属性中文(el-from rules)
    RulesRulesmaybefunctionsthatperformvalidation.function(rule,value,callback,source,options)rule:Object{"field":"name",//检查的属性的名"fullField":"name",//"type":"strin......
  • dynamic form
    Itsoundslikeyou'rebuildingadynamicformwithvariousfieldtypesandpotentialinterdependencies.Thisisamorecomplexscenario,butI'llguideyouthroughthestepstocreatesuchanapplicationusingHTML,CSS,andJavaScript.HTMLS......
  • Angular FormControl value属性的一些事
    背景:一个输入校验,允许输入多行,每一行是ip或网段。写了个校验,将其按行拆分后单独校验。1. FormControl无法深复制使用JSON.parse(JSON.stringify(control))进行简单深复制报错,因为不是json类型;使用deepClone进行递归深复制,直接栈溢出。考虑到代码的健壮性,已经有单独校验......
  • JavaScript:表单生成器
    JavaScript:表单生成器一条小橘猫于2021-12-0116:10:56发布3393收藏38分类专栏:JavaScript文章标签:经验分享javajavascripthtml前端版权华为云开发者联盟该内容已被华为云开发者联盟社区收录加入社区JavaScript专栏收录该内容45篇文章55订阅已订阅表单属性有姓......
  • XL-Formula流式统计运算方式配置说明
    1、简介XL-Formula是一种用于描述流式统计运算方式的配置标准,它代表着一种通用型流式统计系统的实现方法,更深层次它代表着一种以通用型流式统计技术为切入点,低成本实现企业数据化运营的理念。该配置标准语法简洁、功能强大、解析效率高、便于理解和使用。XL-Formula涵盖了各种......