iview表单验证trigger不生效
时间: 2023-08-21 14:09:06 浏览: 38
浅谈关于iview表单验证的问题
5星 · 资源好评率100%
可能是因为你没有在表单项中设置 `prop` 属性,或者设置了错误的 `prop` 属性。`prop` 属性用于唯一标识表单项,从而触发表单验证。
另外,如果你使用了 `rules` 属性来设置表单项的验证规则,可以考虑使用 `validate` 方法触发表单验证,而不是 `trigger` 方法。`validate` 方法可以同时验证整个表单,而 `trigger` 方法只能验证当前表单项。
以下是一个示例代码:
```
<template>
<Form :model="form" :rules="rules" ref="formRef">
<FormItem label="用户名" prop="username">
<Input v-model="form.username" />
</FormItem>
<FormItem label="密码" prop="password">
<Input type="password" v-model="form.password" />
</FormItem>
<FormItem>
<Button type="primary" @click="submitForm">提交</Button>
</FormItem>
</Form>
</template>
<script>
import { Form, FormItem, Input, Button } from 'iview'
export default {
components: {
Form,
FormItem,
Input,
Button
},
data () {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
}
}
},
methods: {
submitForm () {
this.$refs.formRef.validate(valid => {
if (valid) {
// 表单验证通过,可以进行提交操作
console.log('表单验证通过')
} else {
// 表单验证不通过,需要给出错误提示
console.log('表单验证不通过')
}
})
}
}
}
</script>
```
在上面的示例代码中,我们在表单项中设置了 `prop` 属性,并且在 `rules` 属性中设置了验证规则。在提交表单时,我们使用 `validate` 方法触发表单验证,并根据验证结果进行相应的操作。
阅读全文