`
shihuan830619
  • 浏览: 582935 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

form的submit与onsubmit的用法与区别

阅读更多
submit与onsubmit

发生顺序:onsubmit -> submit

1.阻止表单提单:
<script>
function submitFun(){
    //逻辑判断
    return true; //允许表单提交
    //逻辑判断
    return false;//不允许表单提交
}
</script>
<form onsubmit="return submitFun();"> //注意此处不能写成 onsubmit="submitFun();"否则将表单总是提交
</form>

2.onsubmit()与submit() :
<script>
function fun()
{
   alert("form_submit");
}
</script>

<form onsubmit="fun()">
<input type="submit" id="aaa" value="submit">   <!--能弹出form_submit-->
<input type="button" id="bbb" value="onCliCk_submit" onCliCk="doCument.forms[0].submit()">
<!--
表单会提交,但是不会运行fun() 原因是 onsubmit事件不能通过此种方式触发(在IE环境)
直接用脚本doCumetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->
    <input type="button" id="bb1" value="onCliCk_onsubmit" onCliCk="doCument.forms[0].onsubmit()">

<!--会触发fun()参数-->
</form>
分享到:
评论

相关推荐

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

    表单元素的submit()方法和onsubmit事件应用概述

    在网页开发中,表单(Form)是用户与服务器交互的重要工具,而`submit`方法和`onsubmit`事件则是表单控制的核心部分。本文将深入探讨这两个概念及其在实际应用中的注意事项。 首先,`submit()`方法是HTML表单元素的...

    页面提交submit的几种方法

    这里的`onsubmit`属性指定了一个JavaScript函数`stat()`,该函数的作用是验证表单数据的有效性,如果返回`true`则提交表单;反之,则不提交。 #### 方法三:结合`&lt;input type="submit"&gt;`和JavaScript进行复杂验证 ...

    onsubmit阻止form表单提交与onclick的相关操作

    `onsubmit`事件会在用户点击表单内的提交按钮(`&lt;input type="submit"&gt;`)或者通过JavaScript调用`form.submit()`时触发。需要注意的是,如果表单提交是通过一个普通按钮(`&lt;input type="button"&gt;`)的`onclick`...

    表单Form的submit事件不响应的解决方法

    然而,随着技术的发展,更现代的DOM2标准和IE的`attachEvent`注册方式已经变得很常见,这些方法中不存在`onsubmit`方法,因此如果使用`form.onsubmit()`方法会导致错误。 ### 解决方案 为了解决上述问题,可以使用...

    JQuery与JS里submit()的区别示例介绍

    在JavaScript和JQuery中,`submit()`方法都用于提交HTML表单,但它们在使用上存在一些关键区别。本文将通过实例分析这两种方法在ASP.NET环境中的应用,并探讨如何正确处理表单提交事件。 首先,ASP.NET的服务器控件...

    防止Layui form表单重复提交的实现方法

    通过form.on("submit(formConfig)",function(data){...})的调用,开发者可以指定当具有特定lay-filter属性的表单触发提交事件时,执行相应的函数。在这个函数内部,返回false可以阻止表单的提交,即阻止表单数据被...

    前端项目-react-redux-form.zip

    &lt;Form model="myForm" onSubmit={this.handleSubmit}&gt; {/* 更多表单字段 */} &lt;button type="submit"&gt;Submit &lt;/Form&gt; ); } } connect( state =&gt; ({ values: formSelector(state), }), dispatch =&gt; ({ ...

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

    这种方式是在form标签上设置onsubmit事件处理函数。 ```html function check() { var form = document.forms[0]; if (form.userId.value == '') { alert("请输入用户帐号!"); form.userId.focus(); return ...

    浅析onsubmit校验表单时利用ajax的return false无效问题

    代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length&lt;2){ alert&#40;“名称请不少于两个汉字”&#41;; return false; } var t = new Date().getTime(); $.ajax({ type: ...

    JavaScript event(事件) 字符串长度控制及Form表单提交控制

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户交互和页面动态更新方面起着核心作用。在本主题中,我们将深入探讨JavaScript中的事件、字符串长度控制以及如何对Form表单进行提交控制。 首先,我们来讨论...

    vue自定义表单生成器form-create使用详解

    &lt;form-create v-model="$f" :rule="rule" @on-submit="onSubmit"&gt;&lt;/form-create&gt; export default { data () { return { $f: {}, rule: [ { type: 'input', field: 'goods_name', title: '商品名称' }, { ...

    js中return false(阻止)的用法.docx

    #### 一、`return false`的基本概念与作用 在JavaScript中,`return false`通常用于阻止事件的默认行为。当一个事件发生时,浏览器通常会执行一系列默认操作。例如,点击链接时,默认情况下会导航到新的URL地址。但...

    react-reactreduxform利用Redux轻松在React中创建表单

    在`davidkpiano-react-redux-form-b933d8c`这个压缩包中,可能包含了`react-redux-form`库的源码或者示例项目,你可以通过查看这些代码来深入理解库的实现和用法。学习和掌握`react-redux-form`,将有助于你在React...

    jQuery EasyUI API 中文文档 – Form表单

    - `submit(options)`: 提交表单,`options` 对象包含 `url`、`onSubmit` 和 `success` 等属性。 - `load(data)`: 用给定的数据(可以是 URL 或对象)加载并填充表单。 - `clear()`: 清除表单的所有数据。 - `...

    form表单action提交的js部分与html部分

    需要注意的是,由于文章中部分字识别错误或漏识别的情况,有些函数或变量名可能与实际编码规范不一致(如`publishBlog`函数名中的“Blog”与其它部分的“日志”表述不统一),但基于上下文可推断其实际意图和用法。...

    vue3-form-usage:使用vue3的表单用法

    &lt;form @submit.prevent="onSubmit"&gt; &lt;!-- 表单元素 --&gt; &lt;/form&gt; ``` `onSubmit`函数在提交时调用,并通过`.prevent`修饰符阻止了默认的表单提交行为。 6. **表单验证**: Vue3可以通过引入第三方库,如...

    提交按钮的name='submit'引起的js失效问题及原因

    然而,当遇到“提交按钮的name='submit'引起的js失效问题”,这通常涉及到表单提交(form submission)机制与JavaScript事件处理之间的冲突。本文将详细解析这个问题的原因,并提供解决方案。 首先,让我们来看一下...

    AngularJS基础 ng-submit 指令简单示例

    在AngularJS中,当需要对表单提交操作进行自定义处理时,不再使用HTML标准的onsubmit事件,而是通过ng-submit来实现。 首先,ng-submit指令可以与AngularJS的控制器配合使用,以实现数据绑定和逻辑处理。在定义一个...

    react-form-hooks:React形式钩

    &lt;form onSubmit={handleSubmit(onSubmit)}&gt; 用户名" type="text" /&gt; {errors.username && &lt;p&gt;{errors.username.message}&lt;/p&gt;} 邮箱" type="email" /&gt; {errors.email && &lt;p&gt;{errors.email.message}&lt;/p&gt;} {/* ...

Global site tag (gtag.js) - Google Analytics