Vue项目中登陆和注册页面的数据判断

Vue项目中登陆和注册页面的数据判断

本次讲解一下在Vue项目中注册页面和登陆页面中关于输入数据的判断。以我自己做的一个仿某站项目为例。具体项目在我的资源中查看。

这是每个输入框的组件
<template>
  <div>
    <van-cell-group>
      <van-field v-model="content" :label="label" :rule="rule" :placeholder="placeholder" :type="type"/>
    </van-cell-group>
  </div>
</template>
<script>
export default {
  props: ['label','placeholder','type','rule'],
  data() {
    return {
      content:"",
    };
  },
  methods:{
    handle(){
      const rue=new RegExp(this.rule)
      if(rue.test(this.content)){
        this.$emit("inputchange",this.content)
      }
    }
  },
  watch:{
    content(){
      this.handle()
    }
  }
};
</script>
<style scoped>
</style>

//这是Register组件是上面那个组件的父组件
<template>
  <div>
    <login-top middleTop="注册bilibili">
      <div
        slot="right"
        style="font-size: 3.611vw"
        @click="$router.push('/login')"
      >
        切换到登陆
      </div>
    </login-top>
    <login-text
      label="姓名"
      rule="^.{6,16}$"
      @inputchange="(res) => (model.name = res)"
      style="margin: 4.167vw 0"
      placeholder="请输入姓名o"
    ></login-text>
    <login-text
      label="账号"
      rule="^.{6,16}$"
      @inputchange="(res) => (model.username = res)"
      placeholder="请输入账号"
    ></login-text>
    <login-text
      label="密码"
      rule="^.{6,16}$"
      @inputchange="(res) => (model.password = res)"
      placeholder="请输入密码"
      type="password"
    ></login-text>
    <login-btn data="注册" @registerSubmit="registerSubmit"></login-btn>
  </div>
</template>
<script>
import LoginBtn from "../components/LoginBtn.vue";
import LoginText from "../components/LoginText.vue";
import LoginTop from "../components/LoginTop.vue";
export default {
  components: { LoginTop, LoginText, LoginBtn },
  name: "Register",
  data() {
    return {
      model: {
        name: "",
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async registerSubmit() {
      let rulg = /^.{6,16}/;
      if (
        rulg.test(this.model.name) &&
        rulg.test(this.model.username) &&
        rulg.test(this.model.password)
      ) {
        const res = await this.$http.post("/register", this.model);
        this.$msg.fail(res.data.msg);
        localStorage.setItem("token", res.data.objtoken);
        localStorage.setItem("id", res.data.id);
      } else {
        this.$msg.fail("格式不正确,请输入正确格式");
      }
    },
    success() {},
  },
};
</script>
<style scoped>
</style>

我们在data中定义一个content，这是输入框内容的数据。然后使用v-model对content进行双向绑定。
然后使用watch(){}对content进行监听。对于watch不明白的可以看下我这篇博客watch的使用
当用户在输入框中输入数据时就会触发content(){}函数。调用handle函数。RegExp()是将字符串的正则表达式转换成正则。然后如果我们正则匹配成功则就像父组件发送事件名为inputchange，并且将this，content中的数据一起发送过去。

在父组件相应的位置绑定inputChange事件，并且在data中定义model
然后在inputChange事件中将输入的数据传递给modle中相应的属性。
在注册按钮中绑定registerSubmit事件。如果输入的数据匹配正则那么我们就发送ajax请求。

登陆的判断和注册差不多就少了一个name，这就不再多说。

//登陆组件
<template>
  <div>
    <login-top middleTop="登陆bilibili">
      <div
        slot="right"
        style="font-size: 3.611vw"
        @click="$router.push('/register')"
      >
        用户注册
      </div>
    </login-top>
    <login-text
      style="margin: 4.167vw 0"
      label="账号"
      rule="^.{6,16}$"
      @inputchange="(res) => (username = res)"
      placeholder="请输入账号"
    ></login-text>
    <login-text
      label="密码"
      rule="^.{6,16}$"
      @inputchange="(res) => (password = res)"
      placeholder="请输入密码"
      type="password"
    ></login-text>
    <login-btn data="登陆" @registerSubmit="registerSubmit"></login-btn>
  </div>
</template>
<script>
import LoginBtn from "../components/LoginBtn.vue";
import LoginText from "../components/LoginText.vue";
import LoginTop from "../components/LoginTop.vue";
export default {
  components: { LoginTop, LoginText, LoginBtn },
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async registerSubmit() {
      if (this.username && this.password) {
        const res = await this.$http.post("/login", {
          username: this.username,
          password: this.password,
        });
        console.log(res);
        this.$msg.fail(res.data.msg);
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("id", res.data.id);
        setTimeout(() => {
          this.$router.push("/userinfo");
        }, 2000);
      } else {
        this.$msg.fail("格式不正确,请输入正确格式");
      }
    },
  },
};
</script>
<style scoped>
</style>