element-admin 校验

最新推荐文章于 2022-08-05 15:03:28 发布

原创最新推荐文章于 2022-08-05 15:03:28 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue+element-admin 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了两种前端表单验证方式。第一种是通过定义校验方法，检查输入值并在回调中处理错误；第二种是在模板中直接判断条件来决定验证是否执行。示例代码展示了如何针对日期和时间选择器进行验证，确保用户必须选择日期和时间。

第一种方式:我理解是定义一个校验方法，在方法里面判断

记得要写callback()

根据页面判断，如果需要需要清除校验（记得需要同步清除对应form数据）

第二种方式：先判断是否执行方法，方法里面只定义是否为空

<el-row>
    <el-form-item label="时间" :prop="form.pushType == 1 && form.repetition ==1 ?         'pushDate' : ''">
      <el-date-picker
         v-model="form.pushDate"
         type="date"
         placeholder="选择日期"
         :disabled="disabledDateEdit"
         @input="inputDate"
      />
    </el-form-item>
    <el-form-item label="" :prop="form.pushType == 1  ? 'pushDateTime' : ''">
        <el-time-picker
             value-format="HH:mm:ss"
             format="HH:mm:ss"
             v-model="form.pushDateTime"
             placeholder="选择时间"
             :disabled="disabledTimeEdit"
             @input="inputTime"
         />
      </el-form-item>
    </el-row>

validatePushDate(rule, value, callback){
    if (!value) {
       callback(new Error("请选择日期"));
    } else {
       callback();
    }
},
validatePushTime(rule, value, callback){
    if (!value) {
       callback(new Error("请选择时间"));
    } else {
       callback();
    }
},