vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)
作者：SummerGao.
本文通过示例代码介绍了vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的相关操作,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
表单项
<el-row>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker clearable
v-model="form.startTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-date-picker clearable
v-model="form.endTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>验证方法
<el-row>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker clearable
v-model="form.startTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-date-picker clearable
v-model="form.endTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>在规则中使用
rules: {
startTime: [
{ required: true, message: "开始时间不能为空", trigger: "blur" },
{
//调用定义的方法校验格式是否正确
validator: isStartTimeAfterEndTime, trigger: "blur"
}
],
endTime: [
{ required: true, message: "结束时间不能为空", trigger: "blur" },
{
//调用定义的方法校验格式是否正确
validator: isStartTimeAfterEndTime, trigger: "blur"
}
],
}到此这篇关于vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的文章就介绍到这了,更多相关vue3 开始时间与结束时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！