首页 > 软件开发 > JavaScript >

如何阻止表单提交

来源:互联网 2023-03-16 23:56:59 225

阻止form表单提交的几种常见的方法Wfg办公区 - 实用经验教程分享!

如何阻止表单提交Wfg办公区 - 实用经验教程分享!

工具/原料

  • Windows系统
  • web开发环境

方法/步骤

  • 1

    我们直接进入正题 这是测试的html表单代码 提交给alert.html(原来说明是否提交成功,代码就不贴了)(注意是button哦)Wfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 2

    JavaScript方法一:通过return false; 来阻止表单的提交 代码如下图Wfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 2此文章未经许可获取自百度经验
  • 3

    JavaScript方法二:使用preventDefault()方法来阻止 这里ie6-ie8浏览器需要兼容一下哦 代码如下图 (运行结果和上面一样就不演示了)Wfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 4

    JavaScript方法三:这里是另一种方法 也是经常用到 注意form提交是用input哦 刚刚是buttonWfg办公区 - 实用经验教程分享!

    input设置type="submit"后直接可以提交表单的,onsubmit通过验证函数的返回值来决定是否提交表单Wfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 5

    这里是一个js函数 通过函数内的if等判断语句验证字段后 返回true或false 到form的onsubmitWfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 6

    运行HTML页面 点击提交按钮 会弹出窗口点击确定 你会发现页面没有提交哦Wfg办公区 - 实用经验教程分享!

    如何阻止表单提交Wfg办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Wfg办公区 - 实用经验教程分享!


    标签: 网站JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码