el-form中的el-time-picker验证
时间: 2023-08-19 12:04:36 浏览: 145
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
要在 `el-form` 中验证 `el-time-picker` 组件,你可以使用自定义的校验规则和 `el-form-item` 的 `rules` 属性。
首先,在 `el-form-item` 中添加 `prop` 属性,用于标识该表单项。然后,在 `el-form` 中的 `rules` 属性中定义自定义的校验规则。
以下是一个示例:
```html
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="选择时间" prop="time">
<el-time-picker v-model="form.time" placeholder="请选择时间"></el-time-picker>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
time: ''
},
rules: {
time: [
{ required: true, message: '请选择时间', trigger: 'change' }
]
}
};
}
};
</script>
```
在上面的示例中,我们在 `el-form` 中添加了 `:rules="rules"`,将自定义的校验规则对象 `rules` 绑定到表单上。然后,在 `rules` 中定义了一个针对 `time` 字段的校验规则,要求该字段为必填项,并在校验失败时显示相应的错误信息。
当用户选择时间时,`change` 事件会触发表单校验。如果用户未选择时间,则会显示错误提示信息。
你可以根据需要自定义更多的校验规则,例如限制可选时间范围、格式等。请参考 Element UI 文档中关于表单验证的部分以了解更多信息。
阅读全文