基于Vue3+Elements 学号规则验证页面

题目：某高中的学号编码规则为，（1）学号为七位数；（2）前四位为数字，代表入学时间年份；（3）第五位为英文字母：A代表1班；B代表2班；以此类推；（4）第六、七位为数字，代表某学生在班级里的顺序号。若现要实现输入2023年入学的学生学号：该年级有9个班，每班人数不超过50人，试着编写一个页面，主要对输入的学号进行输入验证，即进行输入正确性校验。如果输入错误能进行错误类型提示，如果输入正确，由于大家还未学习连接后端数据库技术，就提示“输入正确”字样。

完成效果：http://ftp6605056.host123.sanfengyun.cn  密码：Sora123456

加载页：

系统主页：

输入超限提示：

输入不足提示：

各种错误针对提示：

正确输入反馈

App.vue源代码如下：

<template>
  <div id="full">
    <!-- 加载动画 -->
    <transition name="el-fade-in">
      <div v-show="isLoading" class="loading-animation" style="color:skyblue; text-align: center;">
        Created by
        <br>
        <br>
        Sora_少年游
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <el-card id="body" class="dark" v-show="!isLoading">
        <div class="card-header">
          <el-text style="font-size: 24px; font-weight: bold;">学号验证</el-text>
        </div>
        <div class="card-body">
          <el-input v-model="studentId" @input="checkInput" placeholder="请输入7位学号" clearable>
            <template #prefix><el-icon :size="34" s>
                <user />
              </el-icon></template>
          </el-input>
          <div v-if="invalidInput" class="input-error">只能输入字母或数字</div>
          <div v-if="isMaxReached" class="input-error">学号不能超过7位</div>
          <el-button type="primary" @click="validateStudentId" @keydown.enter="validateStudentId">验证</el-button>
          <el-button type="primary" @click="clear" :disabled="!studentId">清空</el-button>
        </div>
      </el-card>

    </transition>
    <transition name="el-zoom-in-center">
      <el-dialog v-model="errorDialogVisible" title="错误" width="500" center>
        <span v-html="errorMessage">
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="errorDialogVisible = false; clear()">重新输入</el-button>
          </div>
        </template>
      </el-dialog>
    </transition>
    <transition name="el-zoom-in-center">
      <el-dialog v-model="rightDialogVisible" title="验证通过" width="500" center>
        <span v-html="rightMessage">
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="rightDialogVisible = false; clear()">确认保存</el-button>
          </div>
        </template>
      </el-dialog>
    </transition>

  </div>
</template>
<script>
import { onMounted, ref, onUnmounted } from 'vue';
export default {
  setup() {
    const studentId = ref('');
    const isLoading = ref(true); // 控制加载动画的显示
    const isMaxReached = ref(false);
    const invalidInput = ref(false);
    const errorDialogVisible = ref(false);
    const errorMessage = ref("");
    const rightDialogVisible = ref(false);
    const rightMessage = ref("");
    let validateStudentId = () => {
      // 验证学号逻辑
      console.log(studentId.value);
      const idNum = /^[a-zA-Z0-9]{7}$/;
      if (!idNum.test(studentId.value)) {
        errorMessage.value = "<br>输入学号位数不足7位<br>";
        errorDialogVisible.value = true;
        return;
      }

      let isError = false;  //错误标志
      const reYear = /^2023/;
      if (!reYear.test(studentId.value)) {
        errorMessage.value += "<br>首四位入学年份位输入不正确 应为2023";
        isError = true;
      }
      const reclass = /.{4}[A-I]{1}/;
      if (!reclass.test(studentId.value)) {
        errorMessage.value += "<br>第五位班级位输入不正确，应为A-I之间字母";
        isError = true;
      }
      const stuNum = /.{5}(0[1-9]|[1-4][0-9]|50)/;
      if (!stuNum.test(studentId.value)) {
        errorMessage.value += "<br>最后两位学生号位输入不正确，应为01-50";
        isError = true;
      }
      if (isError) {
        errorDialogVisible.value = true;
      } else {
        console.log("验证通过");
        rightMessage.value = `<br>学号${studentId.value}验证通过:<br>
该学生入学年份为${studentId.value.substring(0, 4)}年<br>
该学生所在班级为${checkClass(studentId.value.substring(4, 5))}<br>
该学生的学生号为${studentId.value.substring(5, 7)}<br>`;
        rightDialogVisible.value = true;
      }

    }
    const keydown = (e) => {
      // 按下回车键触发验证
      if (e.keyCode === 13) {
        validateStudentId();
      }
    }

    let checkClass = (word) => {
      if (word == "A")
        return "1班";
      else if (word == "B")
        return "2班";
      else if (word == "C")
        return "3班";
      else if (word == "D")
        return "4班";
      else if (word == "E")
        return "5班";
      else if (word == "F")
        return "6班";
      else if (word == "G")
        return "7班";
      else if (word == "H")
        return "8班";
      else if (word == "I")
        return "9班";
    }

    onMounted(() => {
      window.addEventListener('keydown', keydown);
    })
    onUnmounted(() => {
      //销毁事件
      window.removeEventListener('keydown', keydown, false)
    });
    let checkInput = () => {
      // 直接使用 studentId.value 来检查输入值
      if (/^[a-zA-Z0-9]*$/.test(studentId.value)) {
        invalidInput.value = false;
      } else {
        // 如果输入了非法字符，显示提示信息并清除它们
        invalidInput.value = true;
        studentId.value = studentId.value.replace(/[^a-zA-Z0-9]/g, '');
      }
      if (studentId.value.length <= 7) {
        isMaxReached.value = false;
        studentId.value = studentId.value.substring(0, 7);
      }
      else {
        isMaxReached.value = true;
        studentId.value = studentId.value.substring(0, 7);
      }
    }

    let clear = () => {
      // 清空输入框逻辑
      studentId.value = '';
      isMaxReached.value = false;
      invalidInput.value = false;
      errorMessage.value = "";
      rightMessage.value = "";
    }
    // 模拟数据加载完成
    setTimeout(() => {
      isLoading.value = false;
    }, 2000); // 假设2秒后数据加载完成

    // 确保返回 studentId, validateStudentId 和 clear 函数
    return {
      isMaxReached,
      studentId,
      validateStudentId,
      clear,
      invalidInput,
      isLoading, // 返回 isLoading
      checkInput,
      errorDialogVisible,
      errorMessage,
      rightDialogVisible,
      rightMessage
    };
  }
}
</script>


<style>
/* 加载动画样式 */
.loading-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  z-index: 999;
}

#body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 600px;
  height: 260px;
}

.el-dialog__title {
  font-size: 24px;
  position: relative;
  left: 16px;
}

.input-error {
  color: red;
  margin-top: 10px;
}

* {
  font-family: "kaiti", Helvetica, Arial, sans-serif;
  margin: 6px;
  padding: 0;
}

#full {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  background-color: rgba(135, 206, 235, 0.35);
  height: 100%;
  width: 100%;
}
</style>