蓝桥第44期 线上编程实战赛-找回密码

仅作记录之用
（第三问就是不对，不知道2分怎么扣的，明明效果都对…）

account.js

<template>
  <div class="account container">
    <section class="content bgcolor-6">
      <span class="input input--juro">
        <input
          :ref="input"
          class="input__field input__field--juro"
          type="text"
          id="userName"
        />
        <label class="input__label input__label--juro" for="input-28">
          <span
            ref="uname"
            id="userNameVerify"
            class="input__label-content input__label-content--juro"
            >用户名</span
          >
        </label>
      </span>
      <span class="input input--juro">
        <input
          :ref="input"
          class="input__field input__field--juro"
          type="text"
          id="idNum"
        />
        <label class="input__label input__label--juro" for="input-29">
          <span
            ref="idnum"
            id="idNumVerify"
            class="input__label-content input__label-content--juro"
            >身份证号</span
          >
        </label>
      </span>
    </section>
    <el-button type="primary" id="nextStep" @click="submit()">下一步</el-button>
  </div>
</template>

<script>
const { ref, onMounted } = Vue;
module.exports = {
  name: "account",
  emits: ['show','next','change'],
  setup(props, ctx) {
    // TODO:补全代码实现目标效果
    let isOk = 0;
    let uname = ref();
    let idnum = ref();
    function submit() {
      let unameT = /[0-9A-Za-z_]{3,5}/g;
      let idT =
        /^[1-9][0-9]{5}(19|20|21)[0-9]{2}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))[0-9]{3}[0-9X]$/g;
      inputs.value.map((el) => {
        if (el.id == "userName")
          if (unameT.test(el.value)) {
            uname.value.innerText = "用户名";
            uname.value.classList.add("right");
            uname.value.classList.remove("wrong");
            isOk++;

          } else {
            uname.value.innerText = "用户名不合法";
            uname.value.classList.remove("right");
            uname.value.classList.add("wrong");
            ctx.emit('change',"error")
            isOk = 0
          }
        if (el.id == "idNum")
          if (idT.test(el.value)) {
            idnum.value.innerText = "身份证号";
           idnum.value.classList.add("right");
            idnum.value.classList.remove("wrong");
            isOk++;
          } else {
            idnum.value.innerText = "身份证号不合法";
            idnum.value.classList.remove("right");
            idnum.value.classList.add("wrong");
            ctx.emit('change',"error")
            isOk = 0
          }
        
        if(isOk == 2){
          ctx.emit('show',"check")
          ctx.emit('next',"1")
          ctx.emit('change',"process")
        }
      });
    }

    // ***此部分代码不用修改***
    //#region
    const inputs = ref([]);
    const input = (el) => {
      inputs.value.push(el);
    };
    onMounted(() => {
      inputs.value.map((el) => {
        if (el.value.trim() != "") {
          el.parentNode.classList.add("input--filled");
        }
        el.onfocus = function () {
          el.parentNode.classList.add("input--filled");
        };
        el.onblur = function () {
          if (this.value.trim() != "") {
            el.parentNode.classList.add("input--filled");
          } else {
            el.parentNode.classList.remove("input--filled");
          }
        };
      });
    });
    //#endregion
    // **********************
    return {
      input,
      submit,
      uname,
      idnum,
    };
  },
};
</script>

<style  scoped>
</style>

---

check.js

<template>
  <div class="check" v-loading="loading" element-loading-text="验证中...">
    <div class="robot">
      <input type="checkbox" v-model="loading" @change="changeS()" />
      <span>确认您是真人</span>
    </div>
  </div>
</template>

<script>
module.exports = {
  name: "check",
  emits: ['show','next','change'],
  setup(props,ctx) {
    // TODO:补全代码实现目标效果
    let loading = ref(false);
    function changeS() {
      let timer = setInterval(() => {
        clearInterval(timer);
        loading.value = false;
        ctx.emit("show", "modify");
        ctx.emit("next", "2");
        ctx.emit("change", "process");
      }, 1500);
    }
    return {
      loading,
      changeS,
    };
  },
};
</script>

<style scoped>
</style>

---

modify.js

<template>
  <div class="modify container">
    <section class="content bgcolor-6">
      <span class="input input--juro">
        <input
          :ref="input"
          class="input__field input__field--juro"
          type="text"
          id="passwordOne"
        />
        <label class="input__label input__label--juro" for="input-28">
          <span
            ref="pone"
            id="passwordOneVerify"
            class="input__label-content input__label-content--juro"
            >请输入密码</span
          >
        </label>
      </span>
      <span class="input input--juro">
        <input
          :ref="input"
          class="input__field input__field--juro"
          type="text"
          id="passwordTwo"
        />
        <label class="input__label input__label--juro" for="input-29">
          <span
            ref="ptwo"
            id="passwordTwoVerify"
            class="input__label-content input__label-content--juro"
            >请再次输入密码</span
          >
        </label>
      </span>
    </section>
    <el-button type="primary" id="alter" @click="submit()">修改</el-button>
  </div>
</template>

<script>
const { ref, onMounted } = Vue;
module.exports = {
  emits: ["show", "next", "change"],
  setup(props, ctx) {
    // TODO:补全代码实现目标效果
    let isOk = 0;
    let pone = ref();
    let ptwo = ref();
    function submit() {
      let poneT =
        /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[_@$!%*?&])[A-Za-z0-9_@$!%*?&]{6,12}$/g;
      let poneText = "";
      console.log(inputs, pone, ptwo);
      inputs.value.map((el) => {
        if (el.id == "passwordOne") {
          poneText = el.value;
          if (poneT.test(el.value)) {
            pone.value.innerText = "请输入密码";
            pone.value.classList.add("right");
            pone.value.classList.remove("wrong");
            isOk++;
          } else {
            pone.value.innerText = "您输入的密码不合法";
            pone.value.classList.remove("right");
            pone.value.classList.add("wrong");
            ctx.emit("change", "error");
            isOk = 0;
          }
        }
        if (el.id == "passwordTwo")
          if (poneText == el.value) {
            ptwo.value.innerText = "请再次输入密码";
            ptwo.value.classList.add("right");
            ptwo.value.classList.remove("wrong");
            isOk++;
          } else {
            ptwo.value.innerText = "两次输入的密码不一致";
            ptwo.value.classList.remove("right");
            ptwo.value.classList.add("wrong");
            ctx.emit("change", "error");
            isOk = 0;
          }

        if (isOk == 2) {
          ctx.emit("show", "success");
          ctx.emit("next", "3");
          ctx.emit("change", "success");
        }
      });
    }

    // ***此部分代码不用修改***
    //#region
    const inputs = ref([]);
    const input = (el) => {
      inputs.value.push(el);
    };
    onMounted(() => {
      inputs.value.map((el) => {
        if (el.value.trim() != "") {
          el.parentNode.classList.add("input--filled");
        }
        el.onfocus = function () {
          el.parentNode.classList.add("input--filled");
        };
        el.onblur = function () {
          if (this.value.trim() != "") {
            el.parentNode.classList.add("input--filled");
          } else {
            el.parentNode.classList.remove("input--filled");
          }
        };
      });
    });
    //#endregion
    // **********************

    return {
      input,
      submit,
      pone,
      ptwo,
    };
  },
};
</script>

<style scoped>
</style>

这里面的正则表达式里，用到了一个正向先行断言
这个断言只是用于确认条件的，它实际上不会匹配任何字符。
例如：(?=.*[A-Z])：这是一个正向先行断言，它确保在匹配位置之后（注意是“之后”，不是之前）的任意位置（由.*表示）存在至少一个大写字母（由[A-Z]表示）。.*表示零个或多个任意字符，因此这个断言会查找整个剩余字符串来确认是否至少有一个大写字母。

---

step.js

<template>
     <div class="steps">
          <el-steps align-center :active="props.active" :process-status="props.status" finish-status="success">
            <el-step title="账号核实" description="输入用户名和身份证号"></el-step>
            <el-step title="验证身份" description="请确认您是真人"></el-step>
            <el-step title="修改密码" description="输入要修改的密码"></el-step>
            <el-step title="成功" description="成功找回密码"></el-step>
          </el-steps>
        </div>
</template>

<script>
const { ref, onMounted } = Vue;
module.exports = {
  // TODO:补全代码实现目标效果
  props: ["active","status"],
  setup(props){
    return{
      props,
    }
  }
}
</script>

<style scoped>

</style>