form提交表单踩坑

最新推荐文章于 2024-01-01 21:15:01 发布

原创最新推荐文章于 2024-01-01 21:15:01 发布 · 789 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #表格验证

JavaScript技术积累同时被 2 个专栏收录

34 篇文章

订阅专栏

踩坑

6 篇文章

订阅专栏

1.项目需求表单中一个select选项需要置灰，随后添加 disabled="disabled"属性，向后台传递时发现后台接收不到值而出现错误。

2.原因：在HTML页面的某元素加入了disable的属性，那么这个元素只是单单的去给用户去显示，当表单提交时，这个元素不会提交给后台去处理．所以当元素加入了disabled属性，后台是无法得到这个属性的值．

3.解决方法：再写一个隐藏属性，name与select一样，一个用于显示，一个用于传值。<input type="hidden" id="yewuxianPid" name="xxx">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hero-zzzzy

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端开发——图片压缩、上传form表单提交踩坑

weixin_44052785的博客

11-19

1148

最近在靠山平台接手了一个二开项目，项目开发中，对接上传身份证实名认证的接口的时候，后端小哥说图片大小要限制在200K以下，当时心想那就压缩下图片呗，小问题，然后一言难尽。。。直接说一下踩坑和折中解决的方法吧，然后有对这个问题比较了解的大神希望能够给予指点。项目接口采用的是form表单提交，上传图片是input的file，图片压缩后的blob没办法替换到file上，这就是遇到的问题了。压缩图片的方法是百度的，粘过来方便有需要的朋友用。https://www.jb51.net/article/18207

element-ui的form表单校验踩坑

weixin_47783830的博客

08-21

1333

今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码：这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la

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

一个简单的表单,说说几个踩过的坑

Kind&红衣的博客

06-18

631

jquery+boostrap3CDN:<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></scr...

form表单提交避坑

Serena_tz的博客

05-06

316

前端开过程，我们经常会遇到表单提交。在使用onsubmit事件时要注意避免可能的坑： html里面要写οnsubmit="return saveForm()"，带return的，这样返回false的话页面才不会跳转。 js里面saveForm()方法里要写return false。方法名千万不能过于简单，比如save()。一定尽量驼峰状长一些的名字，这个可能被js定义过了，所以会出现问题。另外，表单提交我们也可以直接在js中绑定事件，html不作操作，注意在一系列逻辑代码的最后加上ret

Form 表单那些坑

binlety

12-16

381

1.表单提交会刷新（跳转），即使button按钮没有定义type <body> <form action="" target="targetIfr"> <iframe name="targetIfr" style="display:none"></iframe> <input type="text" ...

form提交的几种方式（采坑记录）

请你吃王中王博客

05-01

363

1.在<form></form>中直接加入<button></button>，点击button会自动提交表单，不需要onclick 2.在<form></form>中加入 <input type="submit" value="提交">，点击直接提交，并且会提交input中的值。 3.在<form>&l...

antd表单按钮验证置灰

sadasddpk的博客

03-15

2171

1.初始置灰 componentDidMount() { // To disabled submit button at the beginning. this.props.form.validateFields(); } 2.置灰不显示报错判断是否有错和输入框是否有空 hasErrors = (fieldsError) => { return Object.keys(fieldsError).some(field => fieldsError

微信小程序，为什么表单提交不了

weixin_47977044的博客

05-28

507

---------微信小程序表单踩坑经历1我的代码类似这种，但是我发现自己怎么点击注册都没有反应，连console e都没有显示。js内容：然后我就发现必须把所有input全部点击以下才能够提交。真的很无语。根据我在小程序官网看到的，这是一个bug2018年就有，到现在还未解决。大家写的时候注意了。

Ant Design踩坑（一）Form自定义校验多次发送请求的问题

热门推荐

supelee9527的博客

11-23

2万+

Ant Design表单组件的基本用法这里不做具体阐述，如果要看基本用法请移步：https://ant.design/components/form-cn/Form表单实现自定义校验代码如下: checkName = (rule, value, callback) => { const name = value; if (name) { if

17axios踩坑笔记1

08-08

`Request Payload`是一种JSON格式，而`FormData`则更类似于传统表单提交的数据格式。当后端期望接收JSON数据时，如果前端直接以JSON方式发送，可能会导致数据丢失或无法解析。解决这个问题有以下两种方案： 1. **...

vue antd项目实战——checkbox多选框限制选择个数（disable属性与includes方法）

XSL_HR的博客

03-27

4691

vue antd项目实战——checkbox多选框限制选择个数（利用ant design vue中的disabled属性和JavaScript原生的includes方法判断数组中是否含有某个元素）

layui input标签设置只读不可编辑背景灰化

weixiao的博客

01-27

2万+

layui input标签设置只读不可编辑背景灰化方法记录： 1、只读属性+背景灰化：readonly="true"style="background:#CCCCCC" 2、禁用属性+背景灰化：disabled="disabled"style="background:#CCCCCC"  <input type="text" id="name" name="name" style="background:#CCCCCC...

ant-design-vue的form表单全局禁用问题

Cainannan1995的博客

03-30

3108

定义一个可接收的参数来判断是否为disabled，然后为dom添加class属性。给class设置一个样式就可以。

ant-design-vue的form表单全局禁用不生效

小马甲

01-01

2789

实际使用`ant-design-vue`在开发表单的时候或许会遇到编辑与查看的需求，但是查看的时候表单不允许编辑，`ant-design-vue`的官方是没有像`element`一样提供全局`disabled`属性的，但是我们对一个一个的`form-item`去添加又有一些麻烦，所以我使用了一个全局`css`属性才设置。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。

form内submit按钮的disabled失效?

qq_40457310的博客

02-06

4610

在写表单时经常会为了防止多次提交, 而加入提交按钮一次点击后失效的功能, 但是新手的话有一点小问题要注意比如下面的例子: <form id='form1'> <input type='text' name='content' /> <button type='submit' name='sub-btn'>Submit</button> </form>var form1 = docuemnt.get

layui input标签设置只读不可编辑背景灰化

青茶

05-15

4675

<input type="text" id="name" name="name" style="background:#CCCCCC" readonly="true" placeholder="请输入设备名称" value="ceshi" class="layui-input">  <input type="te..

form表单元素设置disabled属性后支持点击click事件

lnkToKing的博客

09-14

7480

<label onclick="alert('holle world')"><input type="checkbox" disabled style="pointer-events:none"></label>在disabled元素外面包一层，可以是label，也可以是其它的元素，然后把事件写在外层元素上，并把disabled元素样式设置成”pointer-events:none”，这个样式是让元

为 rc-Form 添加获取disabled

qq_33051709的博客

06-06

484

背景在使用ant表单的时候，当我们需要在校验不通过时，按钮就禁用，但是Form没有给我们提供onDisable的方法，怎么办呢？解决办法通过onValuesChange时进行validate const [disabled, setDisabled] = useState(false);//默认检验不通过 const fieldDisabledRef = useRef({}); const valueChange = changeValue => { if (!for

antd form表单使用的踩坑历程

my__road的博客

11-23

1956

'Instance created by `useForm` is not connect to any Form element.' nameList.map is not a function

<template> <view class="container"> <view class="content"> <u-form :model="form" ref="form" :rules="rules" label-width="150">  <u-form-item label="购课来源" prop="sourceId" required> <view class="custom-select" @click="showSourcePicker = true"> <text class="select-text" :class="{placeholder: !form.sourceLabel}"> {{ form.sourceLabel || '请选择购课来源' }} </text> <u-icon name="arrow-down" color="#999" size="28"></u-icon> </view> <u-picker :show="showSourcePicker" :columns="[sourceOptions]" keyName="sourceName" @confirm="onSourceConfirm" @cancel="showSourcePicker = false;"> </u-picker> </u-form-item>  <u-form-item v-if="packageOptions.length > 0" label="课程套餐" prop="courseMenuId" required> <view class="package-list"> <view class="package-item" v-for="item in packageOptions" :key="item.id" :class="{'package-item-active': form.courseMenuId === item.id}" @click="form.courseMenuId = item.id"> <view class="package-name">{{item.name}}</view> <view class="package-price">¥{{item.money}}</view> <view class="package-count">私教:{{item.personaltainerTimes}}节</view> <view class="package-count">小班:{{item.publicTimes}}节</view> <view class="package-count">有效天数:{{item.publicTimes}}</view> <u-icon v-if="form.courseMenuId === item.id" name="checkbox-mark" color="#7FB8A1" size="24" class="package-check"></u-icon> </view> </view> </u-form-item>  <u-form-item label="定金订单" prop="isEarnest"> <u-switch v-model="form.isEarnest" activeValue="1" inactiveValue="0" active-color="#7FB8A1"></u-switch> </u-form-item> </u-form>  <view class="submit-btn"> <u-button type="primary" shape="circle" @click="submitForm" :custom-style="buttonStyle"> 提交 </u-button> </view> </view> </view> </template> <script> import { buySourceInfo, courseMenuInfoDic, sale } from "@/api/purchase-course.js" export default { data() { return { navbarBackground: { backgroundColor: '#7FB8A1' }, buttonStyle: { backgroundColor: '#7FB8A1', color: '#FFFFFF', border: 'none' }, showSourcePicker: false, form: { sourceId: '', sourceLabel: '', courseMenuId: '', isEarnest: false, qrCode: '' }, sourceOptions: [], packageOptions: [], rules: { sourceId: [{ required: true, message: '请选择购课来源', trigger: 'change' }], courseMenuId: [{ required: true, message: '请选择课程套餐', trigger: 'change' }] } }; }, onLoad(option) { console.log(option); this.form.qrCode = option.result }, onReady() { // this.$refs.uForm.setRules(this.rules); }, mounted() { this.getBuySourceInfo() }, methods: { // 获取购课来源 getBuySourceInfo() { buySourceInfo().then((res) => { if (res.code == 200) { this.sourceOptions = res.data } }) }, // 选择购课来源 onSourceConfirm(e) { console.log(e); this.form.sourceId = e.value[0].id this.form.sourceLabel = e.value[0].sourceName this.getCourseMenuInfoDic(this.form.sourceId) this.showSourcePicker = false; }, // 获取课程套餐 getCourseMenuInfoDic(sourceId) { courseMenuInfoDic(sourceId).then((res) => { if (res.code == 200) { this.packageOptions = res.data } }) }, // 提交售课 submitForm() { console.log('开始提交表单'); this.$refs.form.validate(valid => { if (valid) { const { sourceLabel, ...buyRecordAdd } = this.form sale(buyRecordAdd).then((res) => { if (res.code == 200) { setTimeout(() => { uni.showToast({ title: '提交成功', icon: 'success' }); console.log('表单数据:', buyRecordAdd); }, 1500); } }) } else { uni.showToast({ title: '请填写完整信息', icon: 'none' }); } }) } } }; </script> <style lang="scss" scoped> .container { background-color: #f8f8f8; min-height: 100vh; } .content { padding: 20rpx 30rpx; } .custom-select { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; background-color: #fff; border: 1px solid #eee; border-radius: 8rpx; .select-text { font-size: 28rpx; color: #333; &.placeholder { color: #999; } } } .package-list { display: flex; flex-wrap: wrap; margin: -10rpx; } .package-item { width: 100%; margin: 10rpx; padding: 20rpx; background-color: #fff; border-radius: 12rpx; position: relative; border: 1px solid #eee; &-active { border-color: #7FB8A1; background-color: rgba(127, 184, 161, 0.05); } } .package-name { font-size: 28rpx; font-weight: bold; margin-bottom: 10rpx; color: #333; } .package-price { font-size: 32rpx; color: #7FB8A1; font-weight: bold; margin-bottom: 5rpx; } .package-count { font-size: 24rpx; color: #999; } .package-check { position: absolute; right: 10rpx; top: 10rpx; } .submit-btn { margin: 40rpx 0; } </style>点击submitForm没反应

form提交表单 踩坑

form提交表单踩坑