Element-ui Form表单弹出时自动进行了参数校验

element-ui 打开dialog时里面的form表单进行校验并给出了提示,提示还是英文的。

问题代码:

<el-form-item label="领取开始时间" prop="startTime" required>
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              v-model="startTime"
              :clearable="false"
              :editable="false"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="changeStartTimeDate"
              style="width: 100%"
              :picker-options="expireTimeOption"
              :disabled="getType === 'update'"
            ></el-date-picker>
          </el-form-item>
复制代码

表单验证:

startTime: [
          {
            required: true,
            message: "请选择优惠券开始时间",
            trigger: "change"
          }
        ],
复制代码

首先是会提示startTime is required的错误

如果el-form-item组件设置了required属性为true,就会加上这条坑人的验证,产生这条英文提示。嗯……把el-form-item的required属性去掉就好了。

去除掉不会产生英文的错误提示,但是在打开dialog会提示请选择优惠券开始时间,也就是我们所设置的验证提示。

这时候我们需要把验证方式从change改成只在blur时才触发,这样就避免了赋值时触发change导致的验证

startTime: [
          {
            required: true,
            message: "请选择优惠券开始时间",
            trigger: "blur"
          }
        ],
复制代码

如此,打开弹窗时form表单便不会再进行验证了。

具体原因参考

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享