form表单使用小结

最新推荐文章于 2022-08-23 10:09:22 发布
最新推荐文章于 2022-08-23 10:09:22 发布
阅读量2k 收藏 4
点赞数 4
分类专栏： 前端基础 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50646256/article/details/110235537
版权

前后端交互的时候对于数据传输是必须的，form表单传输数据是经常使用的一种方式

下面总结一些最近遇到的问题

form表单外的按钮怎么提交form表单

在前端布局的时候，我们有时候需要将提交按钮放置在form表单外，这个时候怎么去提交指定的表单呢？ 话不多说，上代码

表单外部的按钮

表单提交的js

像这样给表单外的按钮绑定一个函数，使得它点击时就会执行函数就可以了。

按钮不在表单里没有指定submit却还会提交某个表单

这是因为按钮的默认的type就是submit，如果出现了上述问题，只需要将不是提交按钮的type属性改成button即可

更改按钮的type属性

form表单前端想验证完再提交

对于一个form表单，即使定义了按钮点击时触发验证表单内容的函数，但是在点击提交按钮的时候，还是会触发表单提交。这个时候要知道表单的onsubmit属性，这个属性在表单提交事件发生时触发，可以让这个属性的值为一个函数，这样就可以验证表单了。说的简单，怎么验证？ 看代码：

onsubmit
验证表单
首先要注意到onsubmit后面的return，这个很重要，如果没有的话，即使后面直接是一个false，也丝毫不会影响到表单的提交。想要它不提交就return一个false就可以啦，这样就完成了一个简单的表单验证。

让input不能输入的操作

这里的 input的不能输入是指只读属性，但是可以通过其他方式来改变input的值。比如这样：

只读

虽然不能直接通过键盘来输入，但是可以通过按钮来进行操作

修改只读的值

前端攻城fff
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Django框架获取form表单数据方式总结
09-17
主要介绍了Django框架获取form表单数据方式总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
ext form 表单提交数据的方法小结
12-09
EXT的form表单ajax提交（默认提交方式） 代码如下: 1. function login(item) { 2. 3. if (validatorForm()) { 4. // 登录时将登录按钮设为disabled，防止重复提交 5. this.disabled = true; 6. 7...
按钮在form外如果实现提交表单
wangshengfei
04-18 2707
function fsubmit(obj){ obj.submit(); }
element中的el-form里面如果不用el-button,用button的话，要在button放在el-form外面
qq_41629684的博客
03-19 1590
问题现象： 第一次录入时，如果漏填了必填项，点击提交按钮。会刷新界面，所有已填内容都未保存上 问题代码： 问题分析： 在form中的button默认的时候点击时间会执行form的提交事件（相当于默认为submit类型）； 如果需要阻止它,方法有： （1）将button的type修改为：type=button 解决方法： 原来的button换成el-button。或者将button放在el-form外面。 ...
提交按钮在form之外的提交方式，提交按钮提交页面任意表单
热门推荐
zouzongning的博客
06-30 1万+
上结构 <form id="loginForm" action="{:url('Index/add')}" method="post" enctype="multipart/form-data"> <div> ... ... </div> </form> <div> &am
提交按钮在表单内部、外部的使用
chanchaw的专栏
01-17 3488
表单标签内部按钮 在<form>标签内部放<button>标签，不论是否添加type="submit"属性，点击按钮都会执行表单的submit方法，如果放多个按钮，每个按钮的点击事件都会触发submit的方法，要解决这个问题，在非submit的按钮的点击事件中最后添加代码：return false;，就不会执行 submit方法了。 表单标签外部按钮 ...
element UI form表单的提交按钮不在form内，提交触发验证
祖先生的博客
08-20 4105
前置条件：使用的是vue,浏览器是Chrome 开发有时候，form表单的提交按钮不一定在form内，那么要实现当按钮在form表单外也要触发校验的功能。直接贴代码如下 html部分： <el-button @click.native="handleSave">保存</el-button> <el-form :model="messageForm" :rules="messageFormRules" ref="messageForm" label-width="75px.
ant-Design-vue提交按钮放在表单外提交，自定义提交按钮
qq_42661587的博客
08-23 1873
按钮在form标签外提交表单
input提交按钮在form表单外面还要起到提交信息作用
jovi_zhao的博客
11-29 8197
用户登录                                                        用户名或密码错误                                                 input在form外面，但是要想点击按钮可以实现提交作用，在里面加入onclick事件，然后在js代码中添加    
form表单的应用
qq_54081982的博客
08-20 1347
1、form表单是在网站制作中常用到的功能，例如用户名的注册，简历的制作等都会用到form表单。 HTML 中规定，使用 <form> 标签来表示表单。我们都知道表格的行、列及单元格需要放在<table></table> 标签中，表单里的元素也不例外，同样需要放在 <form></form> 标签中。<form> 标签有几个常用的属性，见下表： <form> 标签的常用属性 常用属性 属性值 说明 .
正则表达式总结-form表单
01-27
总结了form表单，以及部分正则表达式，正则表达式很多，只总结了部分常用的
PHP通过get方法获得form表单数据方法总结
12-20
我们在进行网页交互设计的时候，通常都会使用PHP中get变量方法来获得form表单中的数据，以此来实现各种网页动态查询或者请求。对于稍有HTML基础的朋友来说，应该都知道HTML form表单中有两种提交方式即get和post，...
javascript 清空form表单中某种元素的值
10-29
比如在一个表单元素中 我们可以通过手写函数,清空某种元素的值,以上是我的个人总结,高手就绕过。
web安全
qq_50646256的博客
01-22 3227
xss xss的原理是攻击者向web页面中注入恶意脚本代码，在用户访问页面时恶意代码就会执行，从而窃取用户隐式信息。 常见的xss攻击主要有存储型和反射型 存储型 攻击者通过表单将恶意代码提交给服务端数据库存储，当前端渲染服务端传来的数据时，就包含了该脚本，就会被执行。 常见的导致原因： 前端未对用户输入内容做转义直接传递给后端 后端为转义直接存入数据库 后端对数据库中取出的值为进行判断转义直接返回给前端 前端未对后端传来的数据进行转义直接执行 反射型 攻击者将脚本代码拼接到url中作为请求的参数，服务
form表单的input上传文件
qq_50646256的博客
12-04 2859
在这次的一个小项目中用到了文件的上传，在之前我对form表单的认知还只是发送用户名和密码。行吧，既然用到了那就硬着头皮上咯。 使用 首先文件的上传需要一个type=file的input。它的意义就是上传文件，图片，音频，视频都可以用 它来上传。具体来说说它是怎么用的吧： 首先肯定是先放入这个input： 我只是写了这个，其他什么都没有加，这个时候运行起来就看到页面上已经有了这个： 这个按钮就是这个属性自带的，点击即可上传需要的文件，后面的文字会在上传后变为你上传的文件信息，这就是简单的使用了。 inpu
存储，读取，清除数据（localStorage以及file）
qq_50646256的博客
01-22 2410
//储存 localStorage.setItem('exam_name', exam_name); //读取 localStorage.getItem('exam_name'); //清除指定key localStorage.removeItem('exam_name') //清除所有 localStorage.clear();
thymeleaf使用小结
qq_50646256的博客
11-27 1854
当前端需要将后台的数据渲染到页面上时，会有很多的渲染方式可以选择。 比如用js渲染，如下： 这种方式本人觉得会使前端代码变得繁冗，而且项目过大时会比较麻烦。（新手上路，看看就行） 而最近的一次交互中使用的是thymeleaf来进行页面的渲染，感觉很简洁，大大节省了代码量。 像这样简单的代码就完成了将数据渲染到页面上的操作，而且对数据的增删改查变得非常简单，上面写的是thymeleaf中的遍历。语法如下 <tr th:each="userStat:${messages.list}">
node.js简单登录注册功能实现
qq_50646256的博客
01-16 1191
1，首先需要一个sever模块用于引入路由，引入连接数据库的模块，监听服务器 2，要有model层，里面写数据库连接模块和数据库的各种model（表），并导出model对象 3，工具类utils，里面存放一些功能的模块，并且封装后导出 ，例如发送验证码的功能 4，写路由，需要对数据库操作就使用导出的model对象，需要功能模块就使用导出的功能对象 随后返回这个路由，在sever里引入 5，生成api文档 sever模块 //实现登录注册，要先自己写路由放在本地的服务器上 const express=requ
form表单model
最新发布
09-13
在Ant Design Vue中，form表单的model属性是用来绑定表单数据的。通过将model属性设置为一个对象，可以将表单控件的值与该对象中的属性进行双向绑定。这样，在表单数据发生变化时，model对象的属性也会相应地更新。 在你的代码中，你使用了FormModel组件，并定义了一个basicForm对象作为表单的model属性。在这个对象中，你定义了一个属性selectedgroup来存储选择的组数据。 同时，你还定义了一个rules对象，用于进行表单验证。在rules对象中，你为selectedgroup字段定义了一条规则，要求该字段为必填项，同时在发生change事件时进行验证。 然而，你遇到了一个问题，即无法正确地进行表单验证。根据你提供的解释，这是因为你在FormModel组件中的a-form-model-item标签中使用了错误的prop属性。该属性应该与表单数据的属性名保持一致，而不是与rules对象中的字段名保持一致。 正确的代码应该如下所示： ```html <a-form-model-item label="Group" prop="selectedgroup"> <a-select v-model="basicForm.selectedgroup" placeholder="please select the group"> </a-select> </a-form-model-item> ``` 在这段代码中，你使用了selectedgroup作为prop属性，与basicForm对象中的属性名保持一致。这样，表单验证就能够正常工作了。 同时，你还需要相应地更新rules对象中的字段名，将group改为selectedgroup，如下所示： ```javascript basicForm: { selectedgroup: '', }, rules: { selectedgroup: [ { required: true, message: 'Please select the group', trigger: 'change' } ], } ``` 这样，当你选择组数据时，表单验证将会生效，并在未选择组数据时显示错误提示信息。 总结来说，为了使表单验证正常工作，你需要确保在FormModel组件中的a-form-model-item标签中的prop属性与表单数据的属性名保持一致，并在rules对象中相应地更新字段名。这样，Ant Design Vue的表单验证机制才能正确地应用到你的表单中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值