验证规则消息提示显示在下拉框内

最新推荐文章于 2024-09-24 11:41:48 发布

庆春库

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量80

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_70239086/article/details/134855659

版权

文章介绍了在Vue.js中使用ElementUI构建一个带有动态提示的表单，包含活动区域选择器和表单验证功能，当用户选择区域后，提示消失，未选则显示默认提示。

摘要由CSDN通过智能技术生成

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    style="width: 300px"
    :show-message="false"
  >
    <el-form-item label="活动区域" prop="region">
      <el-select
        v-model="ruleForm.region"
        :placeholder="myText"
        clearable
        id="select"
        @focus="onFocus"
        @blur="onblur"
      >
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      myText: "请选择活动区域",
      ruleForm: {
        region: "",
      },
      rules: {
        region: [
          {
            required: true,
            message: "请选择活动区域",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          const dom = document.getElementById("select");
          dom.classList.add("test");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onFocus() {
      console.log("onFocus");
      this.myText = null;
      const dom = document.getElementById("select");
      dom.classList.remove("test");
    },
    onblur() {
      console.log("blur");
      this.myText = "请选择活动区域";
      this.$refs.ruleForm.clearValidate()
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/.test::placeholder {
  color: #f56c6c;
}
</style>