vue el组件里加验证器的代码,验证不通过是提示信息在组件正下方
时间: 2023-11-15 21:05:44 浏览: 38
可以使用 `element-ui` 提供的表单验证插件来实现,在 `el-form-item` 组件中添加 `prop` 属性作为当前表单项的唯一标识,在 `rules` 属性中定义验证规则和提示信息,若验证不通过,则会在组件正下方显示提示信息。
示例代码如下:
```html
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名" prop="username" :rules="[
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
}
};
}
};
</script>
```
上述代码中,定义了一个 `el-form` 组件和一个 `el-form-item` 组件,`prop` 属性设置为 `username`,`rules` 属性定义了两条规则,第一条规则为必填项,当表单项失去焦点并且值为空时触发提示信息;第二条规则为长度限制,当表单项失去焦点并且长度不在 6 到 20 个字符之间时触发提示信息。提示信息会在组件正下方显示。