关于form表单的坑

最新推荐文章于 2022-06-27 16:41:16 发布

原创最新推荐文章于 2022-06-27 16:41:16 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了form表单的两个问题及解决办法。一是当form表单中仅有一个type='text'的input框时，敲击回车会触发表单提交，可添加一个隐藏的input框来阻止；二是form表单里的button按钮默认会submit表单，添加type='button'属性可避免提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、form表单里面有且只有一个type='text'的input框的时候，敲击回车会触发表单提交事件。。。。。

如果想阻止这种情况，在该form表单里面添加一个style='display:none;'的input框如下：

<input id="hiddenText" type="text" style="display:none">

二、form表单里面的button按钮默认也会submit表单，在button标签里面添加type='button'这个属性点击按钮就不会提交表单了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

no matter you who

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

form表单 input textarea 下拉框及display

zhangli2513的博客

08-02

2792

1、表单的作用 1.显示、收集用户信息 2.将收集到的信息提交给服务器 2、表单语法语法：form /form 注意：表单中的内容是可以提交给服务器的，提交给服务器的内容要放在表单元素里表单属性： action:表单提交时的动作，提交地址，值为url，默认值为本页 method：提交方式，常用取值：get或post get（默认值）：明文提交，

关于隐藏属性与表单提交的问题

baidu_27509801的博客

09-01

4181

form表单中visibility=hidden的和display=none的表单元素都会随表单提交,只有disabled=true的元素不随表单提交。

参与评论您还未登录，请先登录后发表或查看评论

深入display:none与visibility:hidden

weixin_50736511的博客

03-20

3660

display:none 我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素（本质上dom是存在的这里跟v-if不一样） 2.display:none具有继承性 3.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为

form表单中什么隐藏属性可以随表单提交

12-02

form中visibility=hidden的和display=none的表单元素都会随表单提交, 只有disabled=true的元素不随表单提交。

from表单取消提交隐藏的标签属性值

小馒头味的博客

11-13

3980

from表单取消提交隐藏的标签属性值 form表单提交被visibility=hidden和display=none修饰的元素都会随表单提交只有disabled=true标记的元素不随表单提交 <table > <tr> <td >结论</td> <td> <label>通过</label>

form表单的提交以及触发方式

Huang_John的博客

10-22

9625

小程序里面有form表单组件，提交表单通过button提交，在form标签里添加bindsubmit事件，然后在button标签里面添加触发bindsubmit事件的属性：form-type=“submit”，就可以将表单提交到服务器了，需要注意的是button必须是要在form标签里面，例如： <form bindsubmit="test"> <button form-ty...

如何使用Jquery获取Form表单中被选中的radio值

12-08

在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，使得开发者能够更加高效地处理HTML元素。...如果你有更多关于jQuery获取radio值或者其他表单操作的技巧，欢迎分享交流。

ant-design-vue3.x的form表单爬坑.pdf

12-16

在1.x版本中，如果我们要对嵌套的表单字段进行验证，通常会使用点号（.）来连接各个层次的属性，例如：`:prop="form.${index}.name"`。这种方式在新的3.x版本中已被废弃。现在，你应该使用数组的方式来指定嵌套字段...

js获取form表单中name属性的值

01-19

在项目中因为动态表单无法确定标签name属性的值，因此需要即时获取以便进行存储。前端代码如下：土拨鼠常挖坑 <form:input path=formAttribute1 class=input-xlarge value= name=测试1/> <form:input ...

解决antd Form 表单校验方法无响应的问题

01-18

antd 的表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....

Ajax提交Form表单页面仍会刷新问题的快速解决办法

12-29

PS：form 表单中存在button时ajax提交后自动刷新问题 //在记一个坑（刚学前台，不是很懂，项目中自己给自己挖了个坑，哈哈...） <form class=form-horizontal> <div class=form-group> 修改资料名称： <...

<div style="display:none">中更改的内容使用js无法获取

yueyeyi1的专栏

03-28

3588

使用页面弹出弹出层的时候无法获取到弹出层上面的input输入框里面的值的解决办法：原因：当使用display：none 隐藏了div的时候，这个div知识隐藏了，使用弹出层显示的时候实际上是复制了，我们在弹出层修改值，但是源界面上的div的内容并没有改变，所以就出现了修改后 alert出来的仍然没有改变的结果，解决的方法是： var nodeId=$("#windown-content

react中form.setFieldvalue数据回填时 value和text不对应的问题

刘优秀的博客

06-27

1万+

react中进入表单的编辑页面时需要将之前新建的数据回填，如果是{}的形式需要一一对应，如果是[]的形式需要单独的值意思是不接受数组对象也就是[{},{},{}]的形式解决方法：借用对象，用key去找value......

行内元素、块元素和css属性display

cqpersonal的博客

10-20

3278

1.行内元素和块元素特征的区分行内元素：相同的元素同行显示，不会换行，除了图片<img>，图片按钮input type='image'（感觉有点像是display:inline-block)，一般不能设置宽高(css里display:inline)。块级元素：前后都有换行符，可以设置宽高，也可以按照内容自动自动增加高度。一般默认时，宽度为100%，独占一行（display:bl...

html form display,Default 'display' value for form controls

weixin_33377571的博客

06-20

577

Copy linkContributorThere are also rendering differences around underline propagation into text controls: Firefox doesn't do it even if display: inline is set (which is the default), while Chrome, a...

Html5中display常用功能

恬静的男子的博客

10-23

8618

display:block; 将行内元素设置为块状元素 display:inline; 将快状元素设置为行内元素 display:none; 隐藏div a{ display:block; /*将a标签设置为块状元素*/ } } #c{ display:inline; /*将块状元素转换成行内元素*/ } #c{ display:none...

html的display属性

最新发布

05-11

<think>好的，我现在需要帮助用户解决在使用element-ui的el-select多选组件时的表单校验问题。首先，我得回忆一下用户提供的引用内容，看看有没有相关的线索。根据引用[1]，用户提到了在el-select多选时使用form表单的rules进行验证，并添加了change事件。这里可能涉及到校验规则的编写和触发时机的选择。引用[2]指出，当绑定的值初始化为空字符串时，会导致自动校验错误，建议将初始值设为空数组。引用[3]也提到了类似的问题，说明初始值设置的重要性。接下来，我需要整理出实现表单校验的具体步骤。首先，数据结构方面，el-select多选应该绑定一个数组，所以form.receivers的初始值应该是空数组而不是空字符串，这样可以避免初始校验错误。然后，校验规则部分，可能需要自定义验证器，检查数组是否为空。如果用户使用的是element-ui的内置规则，比如required，可能需要结合type: 'array'来确保正确触发校验。另外，触发时机也是一个关键点。默认的trigger可能是'change'或者'blur'，但对于多选来说，选择选项后change事件会更及时触发校验。还需要注意，当用户清空选择时，是否能够正确触发校验，确保提示信息及时更新。还有可能遇到的问题包括初始值不正确导致的校验错误，这时候需要检查data中的初始化值是否为数组。另外，自定义验证函数中需要正确处理value的类型，比如判断是否是数组以及长度是否大于零。最后，可能需要给出一个完整的示例代码，包括模板中的el-form、el-select结构，以及data和rules的配置，帮助用户更好地理解如何实现。同时，提醒用户注意初始值设置和触发事件的选择，避免常见的坑。</think>以下是在Element-UI中实现el-select多选表单校验的完整方法（分步骤说明）： 1. **数据结构设置** - 多选值必须使用数组类型初始化 ```javascript data() { return { form: { receivers: [] // 必须初始化为数组而非空字符串 }, rules: { /*...*/ } } } ``` 2. **校验规则配置**（两种实现方式） *方式一：使用内置规则* ```javascript rules: { receivers: [ { required: true, message: '请选择接收人', type: 'array', // 必须声明类型 trigger: 'change' }, { type: 'array', min: 1, message: '至少选择1个接收人', trigger: 'change' } ] } ``` *方式二：自定义验证器* ```javascript const validateReceivers = (rule, value, callback) => { if (!value || value.length === 0) { callback(new Error('请选择接收人')); } else { callback(); } }; rules: { receivers: [ { validator: validateReceivers, trigger: 'change' } ] } ``` 3. **模板关键配置** ```html <el-form-item label="接收人" prop="receivers"> <el-select v-model="form.receivers" multiple filterable @change="handleSelectChange"  >  </el-select> </el-form-item> ``` **常见问题解决方案**： 1. **初始校验报错问题**：将初始值设为空数组而非空字符串可避免初始化校验失败[^2] 2. **校验不触发问题**：确保trigger事件与操作匹配，多选建议使用'change'事件[^1] 3. **清空后校验残留**：在清空操作后手动触发校验 ```javascript handleClear() { this.$refs.form.validateField('receivers'); } ``` **完整示例**： ```javascript export default { data() { return { form: { receivers: [] // 正确初始化 }, rules: { receivers: [ { required: true, type: 'array', message: '请选择至少一个接收人', trigger: 'change' } ] }, users: [...] // 选项数据 } }, methods: { handleSelectChange() { this.$refs.form.validateField('receivers'); } } } ```