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

效果

无内容状态

有内容状态:

相关推荐
星光不问赶路人40 分钟前
vue3使用jsx语法详解
前端·vue.js
Mr Xu_1 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
子兮曰1 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js1 小时前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
weixin79893765432...1 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
陈振wx:zchen20082 小时前
JavaScript
javascript·js
我是伪码农2 小时前
Vue 智慧商城项目
前端·javascript·vue.js
不认输的西瓜2 小时前
fetch-event-source源码解读
前端·javascript
小书包酱3 小时前
在 VS Code中,vue2-vuex 使用终于有体验感增强的插件了。
vue.js·vuex
Zhencode3 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js