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 },
        ],
      },
    };
  },

效果

无内容状态

有内容状态:

相关推荐
oh,huoyuyan26 分钟前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明200229 分钟前
single-spa原理解析
前端·javascript
一枚前端小能手33 分钟前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
@大迁世界1 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
DoraBigHead1 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu1 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu2 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu2 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu2 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
LuckySusu2 小时前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js