elementUI 非表单格式的校验

三线码工

已于 2023-07-15 15:39:03 修改

阅读量1.6k

点赞数

文章标签： elementui vue.js javascript

于 2023-07-13 18:57:37 首次发布

本文链接：https://blog.csdn.net/qq_35946021/article/details/131709446

版权

本文探讨了在ElementUI中如何实现非表单形式的输入验证，特别是对于自定义组件的验证方法。虽然ElementUI在表单验证方面提供了丰富示例，但在非表单场景下，官方文档并未详细阐述。文章通过分享关键代码`clearValidate`方法的运用，为读者提供了一种解决此类问题的方案。

摘要由CSDN通过智能技术生成

在普通表单中对输入框、选择框都有校验案例。

但是在自定义非空中如何进行校验官网并没有说明

关键代码 clearValidate 方法清除校验

 this.$refs.formValue.clearValidate('signinimg')

使用案例

<template>
    <div class="stylebg">
      <Tabs icons="el-icon-shopping-bag-2" :arrs="tabs" />
     
     
      <!--表格  -->
      <div style="margin-top: 20px">
        <el-form ref="formValue"  label-width="120px" :rules="rules" :model="formValue">
            <el-form-item label="标题" prop="title">
              <el-input v-model="formValue.title" placeholder="请输入标题"></el-input>
            </el-form-item>
             
            
            <el-form-item label="单选图">
              <div class="imagelist">
                  <div class="imagelist imgbox" @click="uploadimg('img','1')" v-if="formValue.img">
                      <el-image class="img" :src="formValue.img" fit="cover" ></el-image>
                  </div>  
                  <div  style="border: 1px dashed #d9d9d9;" class="avatar-uploader"   @click="uploadimg('img','1')" v-else>
                      <i class="el-icon-plus" style="width: 100px;height: 100px;display: flex;align-items: center;justify-content