from表单提交数据时,某个字段不提交

今天在测试时突然发现上线的内容有一个字段没有提交上去,直接导致后台报错,上线时测试的很好没有问题。

仔细查看了代码原来是这个字段是自动填写自动需要加上disabled="" 等属性防止用户手动填写。而且做了一个同样的隐藏字段存这个字段的数据,但是不知道怎么的不小心在隐藏字段中同样添加了disabled="" 。查询了资料才知道disabled="" 这个字段是不被提交的。吸取这个教训。检查所有需要提交的自动是否添加了不能提交属性

在Vue3和TypeScript中,可以使用表单验证库来实现某个文本框能为空的验证。 首先,安装表单验证库: ```shell npm install vuelidate@next --save ``` 然后,在需要进行验证的组件中引入库: ```typescript import { defineComponent, ref } from 'vue'; import { useVuelidate } from '@vuelidate/core'; // 导入表单验证库 import { required } from '@vuelidate/validators'; // 导入所需的验证器 export default defineComponent({ setup() { const form = ref({ // 创建一个表单对象 name: '', }); // 使用表单验证库 const rules = { name: { required }, // 设置name字段能为空的验证规则 }; const v$ = useVuelidate(rules, form); const handleSubmit = () => { if (v$.value.$invalid) { // 判断表单是否通过验证 // 表单验证通过,进行相应操作 console.log('表单验证通过'); return; } // 表单验证通过,进行提交操作 console.log('表单验证通过'); }; return { form, handleSubmit, }; }, }); ``` 在模板中,可以接着进行验证提示的展示和表单提交: ```html <template> <form @submit.prevent="handleSubmit"> <input v-model="form.name" type="text" /> <!-- 绑定表单数据 --> <!-- 显示验证错误信息 --> <div v-if="!v$.name.required" style="color: red;">姓名能为空</div> <button type="submit">提交</button> </form> </template> ``` 以上代码实现了在Vue3和TypeScript中使用vuelidate库来验证表单中某个文本框的非空验证,并根据验证结果进行相应的操作。当输入为空,会提示对应的错误信息,否则将提交表单数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值