element-plus form表单验证,提示***is not a string

Async-validator错误解析与解决方案

The error message async-validator: ['identifyAreasList.0.checkPeriod is not a string'] suggests that the async-validator library is encountering a validation issue. Specifically, it expects the checkPeriod property of the first object in the identifyAreasList array to be a string, but it is not.

我遇到的坑,记录一下

首页我们一个输入框可以配置多个验证规则,这个提醒只是针对多个规则当中的一个规则,所以我们首先要针对报错的那一条进行处理,而我一直没解决就是因为一直在处理第一条,导致一直不过,切记

另外我们每条验证规则中type默认是string,这个时候就需要我们指定一下,比如下面的这个:

{ min: 0.1, max: 0.9, message: '算法置信度范围为【0.1 ~ 0.9】,请重新填写', trigger: 'blur' }

它一直报错,是因为我没有给这个规则加type类型,并且输入框也是number类型的,所以只需要 type: 'number'加上就搞定了。

{ min: 0.1, max: 0.9, type: 'number', message: '算法置信度范围为【0.1 ~ 0.9】,请重新填写', trigger: 'blur' }

### 如何在 Element Plus Form 表单中实现增加和删除功能 #### 添加字段或组件 为了动态向 `el-form` 中添加字段,可以通过绑定表单数据模型并提供按钮来触发新增操作。下面是一个简单的例子,在该例子中有一个初始为空数组的字段用于存储多个输入框的内容。 ```vue <template> <div> <el-button @click="addField">Add Field</el-button> <el-form :model="dynamicValidateForm" ref="ruleFormRef"> <el-form-item v-for="(field, index) in dynamicValidateForm.fields" :key="index" :label="'Field ' + (index + 1)" :prop="'fields.' + index + '.value'" :rules="{ required: true, message: 'This field is required.', trigger: 'blur' }"> <el-input v-model="field.value"></el-input> <el-button @click.prevent="removeField(index)">Remove</el-button> </el-form-item> <!-- Submit button --> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button> </el-form-item> </el-form> </div> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import type { FormInstance } from 'element-plus' const ruleFormRef = ref<FormInstance>() interface Field { value?: string; } let id = 0; const dynamicValidateForm = reactive({ fields: [] as Field[], }) // Method to add a new field. function addField() { dynamicValidateForm.fields.push({ value: '' }); } // Method to remove an existing field by its index. function removeField(indexToRemove: number) { if(dynamicValidateForm.fields.length){ dynamicValidateForm.fields.splice(indexToRemove, 1); } } async function submitForm(formEl: FormInstance | undefined) { if (!formEl) return await formEl.validate((valid) => { if (valid) console.log('submit!') else console.log('error submit!!') }) } </script> ``` 此代码片段展示了如何创建一个带有“添加”按钮的表单,点击后会在表单内加入新的输入区域;每个新添的输入都有自己的移除按钮以便于用户能够方便地删减不需要的部分[^1]。 对于每一个被添加到表单中的条目而言,都应当为其配置好相应的验证规则以确保提交前的数据有效性检查得以顺利执行[^2]。 当需要对特定位置的对象进行校验时,可以利用提供的API接口完成更细致的操作,比如针对某个具体项目做合法性的确认工作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值