el-form错误提示信息手动添加和取消的示例代码

目录
  • 需求
  • 方案
    • 最新想到的方案 推荐
      • 运行效果:
      • 实现代码

需求

对表单填写字段进行标记有误和取消标记有误

方案

最新想到的方案 推荐

定义一个存放错误信息的对象,然后再自定义一个验证规则,在这个验证规则中,通过当前验证字段的prop值,到存放错误信息的对象中获取对应的错误提示文案,如果获取到了,则说明,该字段存在标记有误,则让验证不通过,反之,则让验证通过

运行效果:

实现代码

<template>
  <div>
    <h1>标记有误/取消标记有误:</h1>
    <el-button @click="() => onMarkError(['markField', 'mustAndMarkField'])">
      将第二个和最后一个标记有误
    </el-button>
    <el-button @click="() => onMarkError(['markField'])"
      >将第二个标记有误</el-button
    >
    <el-button @click="() => onMarkError(['mustAndMarkField'])"
      >将最后一个标记有误</el-button
    >
    <el-button
      @click="() => onCancelMarkError(['markField', 'mustAndMarkField'])"
    >
      取消第二个和最后一个标记有误
    </el-button>
    <el-button @click="() => onCancelMarkError(['markField'])">
      取消第二个标记有误
    </el-button>
    <el-button @click="() => onCancelMarkError(['mustAndMarkField'])">
      取消最后一个标记有误
    </el-button>
    <el-button type="primary" @click="onSubmit">提交表单</el-button>

    <el-button-group>
      <el-button @click="() => onChangeModel('hasValuePassMarkError')"
        >只要有值则标记有误验证通过</el-button
      >
      <el-button @click="() => onChangeModel('ignoreMarkError')">
        不执行标记有误验证</el-button
      >
    </el-button-group>
    <el-form :model="formData" ref="formDataRef">
      <el-form-item
        label="必填字段"
        prop="mustField"
        :rules="formDataRule.mustField"
      >
        <el-input v-model="formData.mustField"></el-input>
      </el-form-item>
      <el-form-item
        label="标记有误字段"
        prop="markField"
        :rules="formDataRule.markField"
      >
        <el-input v-model="formData.markField"></el-input>
      </el-form-item>
      <el-form-item
        label="普通字段"
        prop="normalField"
        :rules="formDataRule.normalField"
      >
        <el-input v-model="formData.normalField"></el-input>
      </el-form-item>
      <el-form-item
        label="必填且标记有误字段"
        prop="mustAndMarkField"
        :rules="formDataRule.mustAndMarkField"
      >
        <el-input v-model="formData.mustAndMarkField"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "StyleTextPage",
  components: {},
  data() {
    return {
      /**
       * 标记有误验证方法执行模式:
       * hasValuePassMarkError:只要有值,则通过验证,否则不通过验证
       * ignoreMarkError: 一律通过
       */
      onChangeModel: "hasValuePassMarkError",
      // 表单数据
      formData: {
        mustField: null,
        markField: null,
        normalField: null,
        mustAndMarkField: null,
      },
      // 存放标记有误数据的对象
      markErrorData: null,
      // 自定义验证规则:验证是否存在标记有误数据,如果存在,则将标记有误数据,显示为错误数据
      validateMarkError(rule, value, callback, fieldName) {
        if (this.onChangeModel === "ignoreMarkError") {
          // 一律通过
          return callback();
        }
        if (this.markErrorData && this.markErrorData[fieldName]) {
          // 当前验证字段存在标记有误信息
          if (this.onChangeModel === "hasValuePassMarkError") {
            if (value) {
              // 只要有值则通过
              return callback();
            } else {
              // 没值,不通过
              return callback(new Error(this.markErrorData[fieldName]));
            }
          }
        }
        return callback();
      },
      // 测试不同的验证规则组合情况
      formDataRule: {
        mustField: [{ required: true, message: "必填" }],
        markField: [
          {
            validator: (rule, value, callback) =>
              this.validateMarkError(rule, value, callback, "markField"),
            trigger: "blur",
          },
        ],
        normalField: [],
        mustAndMarkField: [
          {
            validator: (rule, value, callback) =>
              this.validateMarkError(rule, value, callback, "mustAndMarkField"),
            trigger: "blur",
          },
          { required: true, message: "必填" },
        ],
      },
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.formDataRef.validate((ret) => {
        if (ret) {
          this.$message({
            message: "验证通过",
            type: "success",
          });
        } else {
          this.$message({
            message: "表单数据验证失败",
            type: "error",
          });
        }
      });
    },
    // 手动删除错误提示信息
    onCancelMarkError(cancelMarkErrorPropArr) {
      if (!this.markErrorData) {
        this.markErrorData = {};
      }
      cancelMarkErrorPropArr.forEach((fieldName) => {
        this.$set(this.markErrorData, fieldName, null);
      });
      this.$refs.formDataRef.clearValidate(cancelMarkErrorPropArr);
    },
    // 手动添加错误提示信息
    onMarkError(markErrorPropArr) {
      if (!this.markErrorData) {
        this.markErrorData = {};
      }
      markErrorPropArr.forEach((fieldName) => {
        this.$set(
          this.markErrorData,
          fieldName,
          `对字段 ${fieldName} 标记有误`
        );
      });
      this.$refs.formDataRef.validateField(markErrorPropArr);
    },
  },
};
</script>

<style scoped lang="scss">
.js-validate-form ::v-deep(.is-error .o-show-data) {
  color: red;
}
</style>

到此这篇关于el-form错误提示信息手动添加和取消的文章就介绍到这了,更多相关el-form错误提示信息内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 关于表单组件el-form中的prop的作用

    目录 表单组件el-form中prop的作用 el-form-item 设置prop报错 表单组件el-form中prop的作用 prop就是一个表单规则中的一个属性 如图: 表单规则和表单数据其实可以是相同的. el-form-item 设置prop报错 please transfer a valid prop path to form item! 官方解释: https://github.com/ElemeFE/element/issues/2327 但是真实的情况是: <template

  • vue el-form一行里面放置多个el-form-item的实现

    最近用到 element-ui 的 el-form,要求一行里面放置多个 el-form-item. 其实很简单,用 layout 布局就可以简单实现. layout 布局是通过基础的24分栏,从而迅速简洁地创建布局. 代码实现如下: <el-form size="mini" label-width="160px" label-position="right" :model="formData" :ref="F

  • element的el-form和el-table嵌套使用实现

    目录 一.element的el-form和el-table嵌套使用 二.应用实例 一.element的el-form和el-table嵌套使用 要点: :model="addJsonForm" 给表单绑定数据,addJsonForm 是传入表单的数据对象 注意表单数据对象 addJsonForm 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型: 属性 addJsonRules ,为表单绑定的验证规则. el-table: 采用自定义列模板,可自定义表

  • el-form 多层级表单的实现示例

    前言 本篇文章基于 vue.element-ui 需求 前端开发过程中,经常遇到表单开发的需求,element-ui 为我们带来了极大的便利,前端只需要更专注于前端逻辑. 我们往往会遇到相对复杂的表单,比如下面的表单: 我们设计的时候可以把它设计成 3 级表单,即划分表单到每一个校验项(输入框,下拉框的等) 最终实现效果如下图所示: 实现 el-form 使用,详情可参见: Form 表单 有几个比较重要的属性: ref 相当于标签的 id model 表单数据对象 rules 表单验证规则 p

  • ElementUI实现el-form表单重置功能按钮

    目录 业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二:在点击重置按钮执行的方法中,执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryP

  • element中el-table与el-form同用并校验

    目录 基本结构 添加校验 自己写校验方法 同table中,某字段不能重复 必填*显示 表头加* 删除某行,同时删除这行的校验结果 基本结构 <template> <div> <el-form ref="form" :model="form"> <el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <e

  • el-form错误提示信息手动添加和取消的示例代码

    目录 需求 方案 最新想到的方案 推荐 运行效果: 实现代码 需求 对表单填写字段进行标记有误和取消标记有误 方案 最新想到的方案 推荐 定义一个存放错误信息的对象,然后再自定义一个验证规则,在这个验证规则中,通过当前验证字段的prop值,到存放错误信息的对象中获取对应的错误提示文案,如果获取到了,则说明,该字段存在标记有误,则让验证不通过,反之,则让验证通过 运行效果: 实现代码 <template> <div> <h1>标记有误/取消标记有误:</h1>

  • Android中TabLayout添加小红点的示例代码

    本文介绍了Android中TabLayout添加小红点的示例代码,分享给大家,具体如下 安卓原生的android.support.design.widget.TabLayout,配合ViewPager已经很好用了,但是有时我们会在内容更新时,在tab标题右上方加上一个红点等标记此tab内容有更新时,就需要给原生的TabLayout设置你定义的布局,用法和原生的一样,只是在代码中设置一下TabLayout的布局. 1.主布局文件 <?xml version="1.0" encodi

  • IntelliJ Plugin 开发之添加第三方jar的示例代码

    本小节内容不多,但是个人感觉比较独立,还是拿出来单讲吧. 在开发 IntelliJ Plugin 时,如果需要用到 Gson.OKHttp 等第三方库时,该怎么办呢? 回答这个问题前,我先补充前面没有讲到的内容. 插件开发其实可以使用两种方式,官方文档:http://www.jetbrains.org/intellij/sdk/docs/tutorials/build_system.html 1.Using Gradle 2.Using DevKit 本系列文章讲的就是 DevKit 方式插件开

  • Python手动实现Hough圆变换的示例代码

    Hough圆变换的原理很多博客都已经说得非常清楚了,但是手动实现的比较少,所以本文直接贴上手动实现的代码. 这里使用的图片是一堆硬币: 首先利用通过计算梯度来寻找边缘,代码如下: def detect_edges(image): h = image.shape[0] w = image.shape[1] sobeling = np.zeros((h, w), np.float64) sobelx = [[-3, 0, 3], [-10, 0, 10], [-3, 0, 3]] sobelx =

  • asp批量添加修改删除操作示例代码

    核心代码: <title>asp批量添加修改删除操作示例</title> <% if request.Form("op")="update" then'表单提交 ids=request.Form("ids") if ids<>"" then response.Write "要删除的数据id集合:"&ids&"<br>"

  • 使用js对select动态添加和删除OPTION示例代码

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

  • django admin后台添加导出excel功能示例代码

    Django功能强大不单在于他先进的编程理念,很多现有的功能模块更是可以直接拿来使用,比如这个牛掰的admin模块,可以作为一个很好的信息登记管理系统. admin模块中的actioin是可以自定义添加的,比如这次要介绍的导出excel功能,就可以在action中触发. 本文将详细介绍如何导出admin中录入的数据为excel,可以直接提交给你的leader观看. 首先我们要安装 xlwt 这个工具模块: pip install xlwt import的准备 修改admin.py: #-*-co

  • 微信自定义菜单的创建/查询/取消php示例代码

    微信公众帐号 服务号可以使用 自定义菜单功能.之前在创建菜单时一直失败,原因是$data 格式一直没有传正确,后来终于解决了.这里先记录下 顺便封装了一个类,便于自定义菜单的管理.此类仅仅是自定义菜单的管理类,并未涉及微信自定义回复和菜单事件的代码. 代码如下 /** * @author LSH 2013-09-06 * * 微信自定义菜单的创建|查询|取消 */ class weixinMenu { public static $appid = null; // 申请得到的appid publ

  • Android中封装RecyclerView实现添加头部和底部示例代码

    前言 我们大家都知道ListView具有添加头部和添加底部的方法,但是RecyclerView并没有这样子的方法.所以RecyclerView是不能添加底部和头部的,但是能不能仿造ListView来实现RecyclerView添加头部和底部呢?答案当然是可行的.本文就来给大家介绍了关于Android封装RecyclerView添加头部和底部的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先看下实现的效果: 代码如下: public class WrapMyRecy

  • Android RecyclerView添加搜索过滤器的示例代码

    搜索过滤功能,相信大家都能用到,一般都是针对列表进行过滤的.下面给大家提供一种过滤列表的方法. 老规矩,先上图 RecycleView搜索过滤器-getFilter() Android 提供了Fileterable类,可以通过过滤器(条件)来过滤数据.通常,getFilter()方法必须在提供过滤条件的适配器类中被重写,以通过列表进行搜索.下面是通过getFilter(),来过滤数据. @Override public Filter getFilter() { return new Filter

随机推荐