el-datepicker校验必填
时间: 2024-05-30 12:06:22 浏览: 346
el-datepicker 是 Element UI 中的一个日期选择器组件,如果需要校验必填,可以通过以下方式实现:
1. 在表单中添加 el-form-item 组件,并设置其 prop 属性为要校验的字段名,如:
```
<el-form :model="form" :rules="rules">
<el-form-item label="日期" prop="date">
<el-date-picker v-model="form.date"></el-date-picker>
</el-form-item>
</el-form>
```
2. 在表单的 rules 属性中定义校验规则,如:
```
data() {
return {
form: {
date: ''
},
rules: {
date: [
{ required: true, message: '请选择日期', trigger: 'change' }
]
}
}
}
```
其中,required 表示必填,message 是校验不通过时的提示信息,trigger 是触发校验的事件,这里设置为 change。
3. 在提交表单时,可以通过调用 el-form 的 validate 方法进行校验,如:
```
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,提交表单
} else {
// 校验不通过
}
});
```
如果 el-date-picker 中选择了日期,则校验通过;否则,会提示“请选择日期”的错误信息。
阅读全文