vue简单的登录、注册功能

最新推荐文章于 2024-03-08 11:46:56 发布

jiacchen

最新推荐文章于 2024-03-08 11:46:56 发布

阅读量775

点赞数 1

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57111105/article/details/129430079

版权

vue.js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1，登录

这里使用的是vue3

登录功能很简单也比较简陋，如图：

在这里插入图片描述

下面登录的代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
       .c {
        text-align: center;
      } 
      h1 {
        text-align: center;
      }
      form {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      //通过v-if进行判断是否登录，登录就显示此div
      <div v-if="flag" class="c">
        <h1>欢迎您：{{name}}</h1>

        //通过v-on简写@绑定点击事件，点击注销按钮时调用logout方法
        <button @click="logout">注销</button>
      </div>

      //未登录就显示此div
      <div v-else>
        <h1>欢迎您：请登录</h1>
        <form action="">
          //使用v-model绑定属性，当输入框的值改变时，vue对象里的值也发生改变
          账号：<input v-model="name" type="text" /> <br /><br />
          密码：<input v-model="password" type="text" /> <br /><br />
      
          //通过v-on简写@绑定点击事件，点击登录按钮时调用login方法
          <button @click="login">登录</button>
        </form>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            name: "",
            password: "",
            flag: false,
            isChecked: false
          };
        },
        methods: {
          login() {
            alert("name：" + this.name +"；"+ "password：" + this.password);
            this.flag = true;
          },
          logout() {
            this.flag = false;
            this.name = ''; //将输入框的内容清空
            this.password = '';
          },
        },
      };
      Vue.createApp(App).mount("#app");
    </script>
  </body>
</html>

2，注册

注册页面加了些css，增加了一些判断，输入的账号需要大于等于3个字符，密码需要大于等于6个字符

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }
    body {
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }
    .container {
      max-width: 400px;
      margin: 50px auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    h1 {
      text-align: center;
      margin-bottom: 30px;
    }
    form {
      display: flex;
      flex-direction: column;
    }
    label {
      margin-bottom: 10px;
      font-weight: bold;
    }
    input[type="text"],
    input[type="password"],
    input[type="email"] {
      /* color: orange; */
      background-color: burlywood;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 20px;
      font-size: 16px;
    }
    input[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    input[type="submit"]:hover {
      background-color: #3e8e41;
    }
    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>创建你的账号</h1>
      <form @submit.prevent="submitForm">
        <label for="username">账号：<span class="error">{{ usernameError }}</span></label>
        <input type="text" id="username" v-model.trim="username" required>
        <label for="password">密码：<span class="error">{{ passwordError }}</span></label>
        <input type="password" id="password" v-model.trim="password" required>
        <label for="email">邮箱：</label>
        <input type="email" id="email" v-model.trim="email">
        <p>偏好设置</p>
        <label><input type="checkbox" v-model="isChecked"/>接收更新邮件</label>
        <input type="submit" value="创建账号">
      </form>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = {
      data() {
        return {
          username: '',
          password: '',
          email: '',
          usernameError: '',
          passwordError: '',
          isChecked: false
        }
      },
      methods: {
        submitForm() {
          this.usernameError = '';
          this.passwordError = '';
          if (this.username.length < 3) {
            this.usernameError = '账号需要大于或等于3个字符';
            // alert("账号需要大于或等于3个字符")
          }
          if (this.password.length < 6) {
            this.passwordError = '密码需要大于或等于6个字符';
            // alert("密码需要大于或等于6个字符")
          }
          if (!this.usernameError && !this.passwordError) {
            alert('创建成功! 账号：'+this.username+'；'+'密码：'+this.password+'；'+'邮箱：'+this.email+'；'+'    是否接收更新邮件：'+this.isChecked);
          }
        }
      }
    };
    Vue.createApp(app).mount("#app")

  </script>
</body>
</html>