el-form 表单设置某个参数非必填验证

html

<el-form ref="form" :rules="rules">
			 <el-form-item  prop="tiktokEmail" label="邮箱"   >
                <el-input v-model="form.tiktokEmail"  placeholder="邮箱" ></el-input>
              </el-form-item>
</el-form>

js

  data() {
    const validateEmailf = (rule, value, callback) => {
      // 此处是判断条件,当内容为空时表单验证直接通过,当内容不为空时再验证格式, callback();便是让其通过
      if (value==''||value==null||value==undefined) {
        callback();
      } else {
        if (!validateEmail(value)) {
          callback(new Error("请输入正确的邮箱格式"));
        } else {
          callback();
        }
      }
    };
    return {
      form: {
        tiktokEmail:''
      },
      // 表单校验
      rules: {
        tiktokEmail: [
          { required: true, trigger: "blur", validator: validateEmailf },
        ],
      },
    };
  },

效果

无内容状态

有内容状态:

相关推荐
吕彬-前端4 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱7 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai16 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨17 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry3 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子3 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端3 小时前
Content Security Policy (CSP)
前端·javascript·面试