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

效果

无内容状态

有内容状态:

相关推荐
hellokatewj3 分钟前
React Hooks 全解:原理、API 与应用场景
前端·javascript·react.js
江湖yi山人15 分钟前
生产环境的log,上传到开发者的本地服务器
javascript·python
嘉琪00131 分钟前
provide 和 inject的理解?
前端·javascript·vue.js
满天星辰33 分钟前
Vue3响应式API-reactive的原理
前端·vue.js
沙子迷了蜗牛眼37 分钟前
当展示列表使用 URL.createObjectURL 的创建临时图片、视频无法加载问题
java·前端·javascript·vue.js
Hi_kenyon1 小时前
VUE3套用组件库快速开发(以Element Plus为例)三
前端·javascript·vue.js
AC赳赳老秦1 小时前
Shell 脚本批量生成:DeepSeek 辅助编写服务器运维自动化指令
运维·服务器·前端·vue.js·数据分析·自动化·deepseek
J总裁的小芒果1 小时前
原生Table写一行保证两条数据
javascript·vue.js·elementui
jqq6661 小时前
解析ElementPlus打包源码(五、copyFiles)
前端·javascript·vue.js
还不秃顶的计科生2 小时前
defaultdict讲解
开发语言·javascript·ecmascript