表单项的name命名为submit、reset引起的问题

最近朋友使用了form的一个表单命名为关键词引起了无法reset和提交.原来是这个问题“调用document.forms[0].reset()报错？”，马上问他：“页面有表单吗？”，回答：“有”。“你alert一下document.forms[0]”，“弹出object”。那就怪了，form啥时候没有reset方法了？
过去看了一下，alert(document.forms[0].reset)发现弹出object这就不对对了，应该是弹出reset本地方法的。搜索一下reset发现原来的reset按钮name为reset，怪不得出错了，document.forms[0].reset指向的是那个reset按钮，而不是表单的reset接口。

把name="reset"去掉，一切OK！

其实当时还发现它的submit按钮的name是submit，估计调submit方法也会出错！
汗一下：不知道是软件生成还是他自己写上的，反正要注意千万不要用这些关键字命名了，很容易出现意外错误！

赞 (0)

相关推荐

  • 表单项的name命名为submit、reset引起的问题

    最近朋友使用了form的一个表单命名为关键词引起了无法reset和提交.原来是这个问题"调用document.forms[0].reset()报错?",马上问他:"页面有表单吗?",回答:"有"."你alert一下document.forms[0]","弹出object".那就怪了,form啥时候没有reset方法了? 过去看了一下,alert(document.forms[0].reset)发现弹出obj

  • js判断所有表单项不为空则提交表单的实现方法

    demo1.html <html> <head> <title>提交表单页</title> <script type="text/javascript"> function myCheck() { for(var i=0;i<document.form1.elements.length-1;i++) { if(document.form1.elements[i].value=="") { alert(

  • JavaScript表单验证实例之验证表单项是否为空

    表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

  • 详解Vue里循环form表单项实例

    详解Vue里循环form表单项实例

    有的时候我们可能会遇到这种需求,用户点击某个按钮就可以增加一个同样的表单出来,点击一次增加一次.然后要用到深拷贝,Vue.js+ElementUI等等.效果大概如下,就是一个表单有下拉框和两个输入框,现在点击"添加表单"按钮之后就会多一个表单出来,点击"提交表单"后就同时提交两个表单的value值. 代码如下: <template> <div> <div style="margin: 10px 0"> <

  • v-for中动态校验el-form表单项的实践

    v-for中动态校验el-form表单项的实践

    目录 问题描述 效果图 代码思路 完整代码 问题描述 在项目开发中,我们经常会遇到表单保存的功能,在表单保存前,常常需要做表单必填项的校验,校验通过以后才去发请求保存表单数据. 但是,这个表单如果是动态的,即:可以新增相同的表单.比如这个表单有输入框和下拉框需要校验,点击添加表格按钮,再新增一个相同的表单,同样新的这个表单对应的输入框和下拉框也需要校验. 本文记录一下对应代码写法思路,我们先看一下效果图: 效果图 代码思路 表单的主数据是要写成对象形式 :model="ruleForm"

  • jQuery自动添加表单项的方法

    本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

  • vue+elementUI动态增加表单项并添加验证的代码详解

    vue+elementUI动态增加表单项并添加验证的代码详解

    参考elementUI官网以及网上的其他一些资料.话不多说,直接贴代码. htmt部分: <div id="app" style="width: 500px;">         <el-form :model="environmentForm" ref="environmentForm">             <el-row :gutter="24" v-for=&quo

  • js实现表单项的全选、反选及删除操作示例

    js实现表单项的全选、反选及删除操作示例

    本文实例讲述了js实现表单项的全选.反选及删除操作.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网站会员激活码管理</title> <script language="javascript"> function ReSel(){ for(i=0;i<document.form1.logs.leng

  • 详解ng-alain动态表单SF表单项设置必填和正则校验

    在使用动态表单时对表单项进行非空校验及正则校验. 使用手机号进行校验,示例如下: 动态表单的基本使用:https://ng-alain.com/form/getting-started/zh 基于基本示例,增加手机号必填与正则校验的例子: @Component({ selector: 'app-home', template: ` <sf [schema]="schema" [ui]="ui" (formSubmit)="submit($event)

随机推荐