vue里手动实现校验

需求1

有这样一个需求，是表格校验，有firstName，email，confirmEmail三个input，提示文字在每个的input的下面
1.我要在点击按钮以后开始校验；
2.同时输入符合规则的时候，提示文字消失

res：

html部分：
<div class="accountCard_form_name">
          <input type="text" placeholder="First name*"
                 v-model="accountFields.firstName"
                 ref="orderOptionsFirstNameRef"
          >

          <input type="text"
                 v-model="accountFields.lastName"
                 placeholder="Last name">
          <div :class="fieldsRequired.firstName?'reminderFalse':'reminderTrue'">提示</div>
</div>


// account details data
    const accountFields = ref({
      firstName: "",
      lastName: "",
      email: "",
      confirmEmail: "",
      telPre: "",
      tel: "",
      supplier: ""
    });

    const validTag = ref(false); // 规避首次校验，在button触发后修改
    // 校验字段 true为不显示提示
    const fieldsRequired = computed(() => {
      if (validTag.value) {
        return {
          firstName: !!accountFields.value.firstName.trim(),
          email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(accountFields.value.email),
          confirmEmail: (accountFields.value.email === accountFields.value.confirmEmail),
          supplier: !!accountFields.value.supplier.trim()
        };
      } else {
        return {
          firstName: true,
          email: true,
          confirmEmail: true,
          supplier: true
        };
      }

    });

// 按钮
const handleSubmitPay = () => {
      // 允许校验
      validTag.value = true
    };

思路：

1. 通过动态属性来给显示隐藏，默认显示；
2. 通过computed来做实时
3. 通过一个变量开关来规避点击之前的触发；符合面向对象的特点：加

需求2

• 动画实现 + 单例的校验函数

• DEMO

function validateFields(fields) {
    // 遍历字段数组
    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        var value = field.value;
        var fieldName = field.name;
        var errorMessage = "";

        // 检查字段值是否为空
        if (value.trim().length === 0) {
            // 根据字段名称生成不同的报错提示
            switch(fieldName) {
                case "username":
                    errorMessage = "用户名不能为空";
                    break;
                case "email":
                    errorMessage = "邮箱不能为空";
                    break;
                case "phoneNumber":
                    errorMessage = "电话号码不能为空";
                    break;
                // 添加更多字段的校验规则和报错提示
                default:
                    errorMessage = "字段不能为空";
                    break;
            }

            return errorMessage; // 返回报错提示
        }

        // 正则表达式校验
        if (fieldName === "phoneNumber") {
            var phonePattern = /^\d{11}$/;
            if (!phonePattern.test(value)) {
                errorMessage = "电话号码格式不正确";
                return errorMessage;
            }
        }

        // 添加更多字段的正则表达式校验
        // if (fieldName === "fieldName") {
        //     var pattern = /正则表达式/;
        //     if (!pattern.test(value)) {
        //         errorMessage = "错误提示";
        //         return errorMessage;
        //     }
        // }
    }

    // 如果所有字段都校验通过，则返回空字符串表示校验通过
    return "";
}

// 示例用法：
var fieldsToValidate = [
    { name: "username", value: "12" },
    { name: "email", value: "john@example.com" },
    { name: "phoneNumber", value: "" }
];

var errorMessage = validateFields(fieldsToValidate);
if (errorMessage) {
    console.log("校验失败，错误提示：" + errorMessage);
} else {
    console.log("校验通过");
}

// 动画

<!--loaded-->
<template>
  <div v-if="showError" :class="{ 'error-popup': true, 'leave': hideError }">
    <img alt="Error Image" className="error-image">
    <p className="error-text">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showError: false,
      hideError: false,
      errorMessage: ''
    };
  },
  methods: {
    showErrorPopup(message) {
      this.errorMessage = message;
      this.showError = true;
      setTimeout(() => {
        this.hideErrorPopup();
      }, 1000); // 3秒后自动隐藏
    },
    hideErrorPopup() {
      this.hideError = true;
      setTimeout(() => {
        this.showError = false;
        this.hideError = false;
      }, 1000); // 等待动画完成后重置状态
    }
  },
  mounted() {
    this.showErrorPopup('no big deal ')
  }
};
</script>

<style>
.error-popup {
  position: fixed;
  top: -100px; /* 初始位置在屏幕顶部之外 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffcccc;
  border: 1px solid #ff0000;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
  opacity: 0; /* 初始状态透明 */
  animation: slideInAndOut 4s forwards; /* 应用动画效果 */
}

.error-image {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.error-text {
  font-size: 16px;
  color: #ff0000;
}

@keyframes slideInAndOut {
  0% {
    top: -100px; /* 初始位置在屏幕顶部之外 */
    opacity: 0; /* 完全透明 */
  }
  20% {
    top: 50px; /* 滑入到屏幕中间位置 */
    opacity: 1; /* 完全显示 */
  }
  80% {
    top: 50px; /* 保持在屏幕中间位置 */
    opacity: 1; /* 保持完全显示 */
  }
  100% {
    top: -100px; /* 滑出到屏幕顶部之外 */
    opacity: 0; /* 完全透明 */
  }
}

@keyframes slideUpAndFadeOut {
  0% {
    top: 50px; /* 初始位置在屏幕中间 */
    opacity: 1; /* 完全显示 */
  }
  100% {
    top: -100px; /* 滑出到屏幕顶部之外 */
    opacity: 0; /* 完全透明 */
  }
}

.leave {
  animation: slideUpAndFadeOut 1s forwards; /* 应用离开动画效果 */
}
</style>

• 组合

场景3

• 通过e.target来搞

<template>
  <div>
    <input v-model="inputValue1" @blur="checkInput(inputValue1)" placeholder="请输入内容">
    <input v-model="inputValue2" @blur="checkInput(inputValue2)" placeholder="请输入内容">
    <!-- 更多 input -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue1: '',
      inputValue2: ''
      // 更多 inputValue
    };
  },
  methods: {
    checkInput(value) {
      // 在这里编写检查输入框内容的逻辑，例如正则表达式等
      // 如果输入不符合规则，则通过动态类来显示提示文字
      // 否则通过动态类来隐藏提示文字
      const isValid = /^[A-Za-z]+$/.test(value);
      const inputEl = event.target;
      if (!isValid) {
        inputEl.classList.add('invalid');
      } else {
        inputEl.classList.remove('invalid');
      }
    }
  }
};
</script>

<style scoped>
input.invalid + span::after {
  content: "输入不符合规则";
  color: red;
  display: block;
}
</style>