快捷導(dǎo)航

vue3 開始時間與結(jié)束時間比較驗(yàn)證(結(jié)束時間需要大于開始時間)

更新時間：2024年07月15日 09:52:44 作者：SummerGao.

本文通過示例代碼介紹了vue3 開始時間與結(jié)束時間比較驗(yàn)證(結(jié)束時間需要大于開始時間)的相關(guān)操作,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧

表單項(xiàng)

 <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="結(jié)束時間" prop="endTime">
              <el-date-picker clearable
                              v-model="form.endTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="請選擇結(jié)束時間">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

驗(yàn)證方法

 <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="結(jié)束時間" prop="endTime">
              <el-date-picker clearable
                              v-model="form.endTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="請選擇結(jié)束時間">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

在規(guī)則中使用

rules: {
    startTime: [
      { required: true, message: "開始時間不能為空", trigger: "blur" },
      {	
        //調(diào)用定義的方法校驗(yàn)格式是否正確
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
    endTime: [
      { required: true, message: "結(jié)束時間不能為空", trigger: "blur" },
      {	
        //調(diào)用定義的方法校驗(yàn)格式是否正確
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
  }

到此這篇關(guān)于vue3 開始時間與結(jié)束時間比較驗(yàn)證(結(jié)束時間需要大于開始時間)的文章就介紹到這了,更多相關(guān)vue3 開始時間與結(jié)束時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: