elementui如何实现表单的自定义校验,当表单字段是数组,且数组中每个对象的某个属性都为11位数数字时,通过表单校验
时间: 2024-02-17 10:04:32 浏览: 68
自定义表单验证
要实现表单的自定义校验,你需要使用 ElementUI 提供的校验规则函数。对于数组类型的表单字段,你可以使用自定义校验函数来实现校验。
下面是一个实现数组中每个对象的某个属性都为11位数数字的自定义校验函数的示例:
```javascript
// 定义一个自定义的校验规则函数
const validateArray = (rule, value, callback) => {
// 遍历数组中的每个对象
for (let i = 0; i < value.length; i++) {
if (!/^\d{11}$/.test(value[i].phone)) {
// 如果对象的 phone 属性不是 11 位数字,则返回错误提示
callback(new Error(`第 ${i + 1} 个对象的 phone 属性不是 11 位数字`))
return
}
}
// 校验通过,调用 callback() 函数,传入参数 null 或者 undefined
callback()
}
// 在表单中使用自定义校验规则函数
rules: {
array: [
{ required: true, message: '请输入数组', trigger: 'blur' },
{ validator: validateArray, message: '数组中每个对象的 phone 属性必须为 11 位数字', trigger: 'blur' }
]
}
```
在上面的代码中,我们定义了一个名为 `validateArray` 的自定义校验规则函数,用于校验数组中每个对象的 `phone` 属性是否为 11 位数字。在表单中,我们将该函数作为校验规则函数传入到 `validator` 中,当表单中的数组字段被触发校验时,就会调用这个函数来进行校验。如果校验通过,则调用 `callback()` 函数,否则返回错误提示信息。
阅读全文