el-form-item :rules
时间: 2023-12-06 14:33:47 浏览: 30
el-form-item 的 rules 属性是用来定义表单项的校验规则的。它是一个数组,每个元素都是一个对象,用来描述一个校验规则。每个校验规则对象包含以下属性:
- required:是否必填,布尔类型,默认为 false。
- message:校验失败时的提示信息,字符串类型。
- trigger:触发校验的事件,字符串类型,默认为 'blur'。
- validator:自定义校验函数,Function 类型。
例如,下面的代码定义了一个必填项的校验规则:
```html
<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
<el-input v-model="form.username"></el-input>
</el-form-item>
```
相关问题
el-form-item中 :rules
el-form-item中的 :rules 是用来设置表单验证规则的属性。它可以接收一个数组,数组中每个元素都是一个验证规则对象,用来对表单项进行验证。
例如,我们可以在一个 el-form-item 中设置一个必填项的验证规则:
```
<el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
<el-input v-model="username"></el-input>
</el-form-item>
```
这样,当用户没有输入用户名时,表单项会显示错误提示信息。
el-form-item v-for :rules 校验失效
在使用v-for循环渲染el-form-item时,需要注意:rules的值应该是一个函数,而不是一个静态的数组。这样可以确保每一项都有自己独立的校验规则。
例如:
```
<el-form-item v-for="(item, index) in items" :key="index" :rules="getRules(index)">
```
```
methods: {
getRules(index) {
return [
{ required: true, message: '请输入内容' },
{ min: 5, message: '最少输入5个字符' },
]
}
}
```
这样就可以避免出现校验失效的情况。