form提交表单 踩坑

最新推荐文章于 2024-01-01 21:15:01 发布
最新推荐文章于 2024-01-01 21:15:01 发布
阅读量789 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript技术积累 踩坑 文章标签： javascript 表格验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Rickysss/article/details/78839819

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

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

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

前端开发——图片压缩、上传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 630
jquery+boostrap3CDN:&lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/&gt; &lt;script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"&gt;&lt;/scr...
form表单提交避坑
Serena_tz的博客
05-06 315
前端开过程，我们经常会遇到表单提交。在使用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 2169
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 3102
定义一个可接收的参数来判断是否为disabled，然后为dom添加class属性。给class设置一个样式就可以。
ant-design-vue的form表单全局禁用不生效
小马甲
01-01 2785
实际使用`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 4674
<!-- 设置只读 背景灰化 --> <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 7479
<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 1954
'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没反应
最新发布
07-24
用户描述说：在提交表单时没有反应，需要排查问题，特别是submitForm无法触发验证或提交。 根据提供的引用，我们可以总结以下几点： 1. 引用[1]提到，uni-form没有默认的submit方式，提交前的验证是通过调用`this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值