视图预览

完整代码

<template>
  <div class="container">
    <h2>国货之光登录注册</h2>
    <div class="box">
      <div class="item">
        <label for="username">用户名：</label>
        <input type="text" id="username" class="txtInput txt260" v-model.lazy="username">
        <div v-if="errorFlag === 1" class="error">{{ tips[0] }}</div>
      </div>
      <div class="item">
        <label for="password">密码：</label>
        <input type="password" id="password" class="txtInput txt260" v-model.lazy="password">
        <div v-if="errorFlag === 2" class="error">{{ tips[1] }}</div>
      </div>
      <div class="item">  
        <label for="confirmPassword">确认密码：</label>
        <input type="password" id="confirmPassword" class="txtInput txt260" v-model.lazy="confirmPassword">
        <div v-if="errorFlag === 3" class="error">{{ tips[2] }}</div>
      </div>
      <div class="item">
        <label for="email">邮箱：</label>
        <input type="text" id="email" class="txtInput txt260" v-model.lazy="email">
        <div v-if="errorFlag === 4" class="error">{{ tips[3] }}</div>
      </div>
      <div class="item">
        <input type="checkbox" id="regree" class="check" v-model="regree">我已阅读并同意《用户协议》
      </div>
      <div class="item">
        <button type="button" class="btn" @click="submit">注册</button>
      </div>
    </div>
  </div>
</template>

<script>  
import { reactive, toRefs, watch } from 'vue';

export default {
  setup() {
    const data = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      email: '',
      regree: false,
      tips: ["用户名不能包含特殊符号", "6~12位字符包括数字、字母、符号", "确认密码不一致", "邮箱格式不正确"],
      errorFlag: 0
    });

    const validateUsername = () => {
      const reg = /^[a-zA-Z0-9_-]+$/;
      if (!reg.test(data.username)) {
        data.errorFlag = 1;
      } else {
        data.errorFlag = 0;
      }
    };

    const validatePassword = () => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
      if (!reg.test(data.password)) {
        data.errorFlag = 2;
      } else {
        data.errorFlag = 0;
      }
    };

    const validateConfirmPassword = () => {
      if (data.password !== data.confirmPassword) {
        data.errorFlag = 3;
      } else {
        data.errorFlag = 0;
      }
    };

    const validateEmail = () => {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(data.email)) {
        data.errorFlag = 4;
      } else {
        data.errorFlag = 0;
      }
    };

    const submit = () => {
      if (!data.username) {
        data.errorFlag = 1;
        return;
      }
      if (!data.password) {
        data.errorFlag = 2;
        return;
      }
      if (data.password !== data.confirmPassword) {
        data.errorFlag = 3;
        return;
      }
      if (!data.email) {
        data.errorFlag = 4;
        return;
      }
      if (!data.regree) {
        alert('请阅读并同意用户协议');
        return;
      }
      // 提交表单的逻辑
      console.log('表单已提交');
    };

    watch(() => data.username, validateUsername);
    watch(() => data.password, validatePassword);
    watch(() => data.confirmPassword, validateConfirmPassword);
    watch(() => data.email, validateEmail);

    return {
      ...toRefs(data),
      submit
    };
  }
};
</script>

<style>
.container {
  text-align: center;
  padding: 20px;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.item {
  margin-bottom: 10px;
}

.txtInput {
  padding: 5px;
  font-size: 16px;
}

.error {
  color: red;
  font-size: 14px;
}

.check {
  margin-right: 10px;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: #45a049;
}
</style>