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

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 实现表单的部分字段校验 为了实现对特定字段的单独校验,在 `el-form` 中可以通过调用实例方法 `validateField` 来完成这一操作。此方法接收要验证的一个或多个字段名称作为参数,并执行相应的验证逻辑[^1]。 下面是一个具体的例子来说明如何仅针对某些字段触发校验: ```html <template> <div id="app"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef"> <!-- 姓名 --> <el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <!-- 手机号 --> <el-form-item label="手机号码" prop="phone"> <el-input v-model="ruleForm.phone"></el-input> </el-form-item> <!-- 不参与即时校验的字段 --> <el-form-item label="地址" > <el-input v-model="ruleForm.address"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('name')">只检验姓名</el-button> <el-button type="success" @click="submitForm(['name', 'phone'])">检验姓名和电话</el-button> </el-form> </div> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import type { ElForm } from 'element-plus' interface RuleForm { name: string; phone: string; address?: string; } const ruleFormRef = ref<InstanceType<typeof ElForm>>() const ruleForm: RuleForm = reactive({ name: '', phone: '' }) // 定义规则 const rules = reactive({ name: [ { required: true, message: '请输入您的名字', trigger: 'blur' } ], phone: [ { required: true, message: '请输入有效的手机号码', trigger: 'change' }, { pattern: /^1\d{10}$/, message: '手机号格式错误'} ] }) function submitForm(fields:string | string[]) { if (!ruleFormRef.value) return; ruleFormRef.value.validateField( fields, (invalidFields) => { console.log(invalidFields ? "有未通过项": "全部通过"); }) } </script> ``` 在这个案例里,点击不同的按钮可以选择性地对不同组合的字段进行校验。对于不需要立即校验的字段(比如这里的“地址”),则不必为其配置 `prop` 属性及其对应的验证规则[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值