当前位置: 首页 > article >正文

VUE2表单检验及提示的消除

表单的检验规则如下:

rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],

      }

上面的检验存在局限性,当表单数据发生变化时,不能灵活做到提示文字的消除。可通过以下方式来实现:

1. 使用 trigger: 'change' 或 trigger: 'input'

默认情况下,trigger: 'blur' 会在输入框失去焦点时触发校验。如果你希望输入内容时实时校验,可以将 trigger 改为 'change' 或 'input'

rules: {
  brandId: [
    { required: true, message: "品牌不能为空", trigger: "change" } // 实时校验
  ],
  seriesId: [
    { required: true, message: "系列不能为空", trigger: "change" } // 实时校验
  ],
  levelName: [
    { required: true, message: "等级名称不能为空", trigger: "change" } // 实时校验
  ],
  firstLetter: [
    { required: true, message: "检索首字母不能为空", trigger: "change" } // 实时校验
  ],
}

2. 使用 validateField 方法手动触发校验

如果你希望在数据变化时手动触发校验,可以使用 validateField 方法。例如,在输入框的 @input 事件中调用该方法。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="品牌" prop="brandId">
      <el-input v-model="form.brandId" @input="validateField('brandId')"></el-input>
    </el-form-item>
    <el-form-item label="系列" prop="seriesId">
      <el-input v-model="form.seriesId" @input="validateField('seriesId')"></el-input>
    </el-form-item>
    <el-form-item label="等级名称" prop="levelName">
      <el-input v-model="form.levelName" @input="validateField('levelName')"></el-input>
    </el-form-item>
    <el-form-item label="检索首字母" prop="firstLetter">
      <el-input v-model="form.firstLetter" @input="validateField('firstLetter')"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        brandId: "",
        seriesId: "",
        levelName: "",
        firstLetter: "",
      },
      rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    validateField(prop) {
      this.$refs.form.validateField(prop);
    }
  }
};
</script>

3. 使用 watch 监听表单数据变化

如果你不想在每个输入框上绑定 @input 事件,可以通过 watch 监听表单数据的变化,并调用 validateField 方法。

export default {
  data() {
    return {
      form: {
        brandId: "",
        seriesId: "",
        levelName: "",
        firstLetter: "",
      },
      rules: {
        brandId: [
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        seriesId: [
          { required: true, message: "系列不能为空", trigger: "blur" }
        ],
        levelName: [
          { required: true, message: "等级名称不能为空", trigger: "blur" }
        ],
        firstLetter: [
          { required: true, message: "检索首字母不能为空", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    "form.brandId": function (newVal) {
      this.$refs.form.validateField("brandId");
    },
    "form.seriesId": function (newVal) {
      this.$refs.form.validateField("seriesId");
    },
    "form.levelName": function (newVal) {
      this.$refs.form.validateField("levelName");
    },
    "form.firstLetter": function (newVal) {
      this.$refs.form.validateField("firstLetter");
    },
  }
};

4. 使用 clearValidate 方法清除校验状态

如果输入框的值已经合法,你可以调用 clearValidate 方法清除校验状态。

methods: {
  validateField(prop) {
    this.$refs.form.validateField(prop, (errorMessage) => {
      if (!errorMessage) {
        this.$refs.form.clearValidate(prop); // 清除校验状态
      }
    });
  }
}

5. 使用 async-validator 的 validate 方法

如果你需要更灵活的控制,可以直接使用 async-validator 的 validate 方法。

import Schema from "async-validator";

const descriptor = {
  brandId: { required: true, message: "品牌不能为空" },
  seriesId: { required: true, message: "系列不能为空" },
  levelName: { required: true, message: "等级名称不能为空" },
  firstLetter: { required: true, message: "检索首字母不能为空" },
};

const validator = new Schema(descriptor);

methods: {
  validateField(prop) {
    validator.validate({ [prop]: this.form[prop] }, (errors) => {
      if (errors) {
        // 显示错误信息
      } else {
        // 清除错误信息
      }
    });
  }
}


http://www.kler.cn/a/576196.html

相关文章:

  • 迷你世界脚本自定义UI接口:Customui
  • dify中使用NL2SQL
  • 更新Vim使其支持系统剪切板
  • 探秘沃尔什-哈达玛变换(WHT)原理
  • 【蓝桥杯】每天一题,理解逻辑(3/90)【Leetcode 快乐数】
  • 初识Qt · 信号与槽 · 基础知识
  • K8s 1.27.1 实战系列(四)验证集群及应用部署测试
  • Redis 中配置账号密码是通过设置 `requirepass` 参数来实现
  • 解决VMWare无法打开虚拟机——内部错误
  • NewStar CTF week3 web wp
  • 【算法系列】桶排序算法介绍及实现
  • 永洪科技深度分析实战,零售企业的销量预测
  • MySQL 数据目录迁移导致启动失败
  • 【前端基础】Day 10 CSS3-2D3D
  • VSCode SSH中删除指定IP的方法
  • MySQL : 数据库和表操作
  • LLM 学习(二 完结 Multi-Head Attention、Encoder、Decoder)
  • PDFelement Pro v11.4.8.3352 万兴PDF国际解锁版 下载
  • 大模型在垂直行业的落地实践:从通用到定制化的技术跃迁
  • 【GoTeams】-4:为项目引入etcd