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

效果

无内容状态

有内容状态:

相关推荐
i220818 Faiz Ul25 分钟前
计算机毕业设计|基于springboot + vue鲜花商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
暴力袋鼠哥3 小时前
基于 Spring Boot 3 + Vue 3 的农产品在线销售平台设计与实现
vue.js·spring boot·后端
coding随想5 小时前
TypeScript 高级类型全攻略:从“可表达性”到“类型体操”的实践之路
前端·javascript·typescript
WWWWW先生5 小时前
02 登录功能实现
前端·javascript
Lee川6 小时前
深入解析:从内存模型到作用域陷阱——JavaScript变量的前世今生
javascript·算法
豆苗学前端6 小时前
彻底讲透医院移动端手持设备PDA离线同步架构:从"记账本"到"分布式共识",吊打面试官
前端·javascript·后端
paterWang7 小时前
基于SpringBoot+Vue的鞋类商品购物商城系统的设计与实现
vue.js·spring boot·后端
Esaka_Forever8 小时前
Promise resolve 的基础用法
前端·javascript
赵_叶紫8 小时前
Vue 3 从基础到组合式 API 全解析
vue.js