登录表单验证

这里用的是Vue框架做的登录表单验证，登录页面一定会和数据库的用户信息进行交互，我们一可以在项目包里引入axios,代码如下

npm install axios

我们装好需要的项目包后可以在项目里面建立一个Login.vue组件，在设置好router后，我们可以进入Login.vue，这里的注册登录用的是手机号，与密码，代码如下

<template>
<div>
<input
   type="text"
   placeholder="手机账户"
   maxlength="11"
   required
   autofocus
   v-model="phone"
  />
     
 <input type="password" placeholder="密码" required v-model="pwd" />
<button class="loginbtn" @click="checkForm">登录</button>
</div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      phone: "", // 绑定手机号输入框的值
      pwd: "",
    };
  },

  methods: {
    /** 验证表单 */
    checkForm() {
      if (this.checkPhone() && this.checkPwd()) {
        // console.log("表单验证通过，执行登录...");
        let params = `phone=${this.phone}&password=${this.pwd}`;
        this.axios.post("/login", params).then((res) => {
          // console.log("登录成功", res);
          if (res.data.code == 200) {
            //登录成功
            this.$toast({
              message: "登录成功",
              position: "bottom",
              duration: 2000,
            });
            // 登录成功，更新vuex
            //设置Vuex登录标志为true，默认userLogin为false
            this.$store.dispatch("userLogin", true);
            //Vuex在用户刷新的时候userLogin会回到默认值false，所以我们需要用到HTML5储存
            //我们设置一个名为Flag，值为isLogin的字段，作用是如果Flag有值且为isLogin的时候，证明用户已经登录了。
            localStorage.setItem("Flag", "isLogin");
            // console.log(isLogin);
            // 登录成功成功跳转
            this.$store.commit('loginOK',this.phone)
            this.$router.push("/home/index");
          } else {
            //登录失败
            this.$messagebox("提示", "账号密码错误,请重新登录");
          }
        });
      }
    },
    checkPwd() {
      /** 验证密码 */
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
      if (reg.test(this.pwd)) {
        // 验证成功
        return true;
      } else {
        // 验证失败
         this.$toast({
              message: "密码输入有误",
              position: "center",
              duration: 1000,
            });
        return false;
      }
    },
    checkPhone() {
      /** 验证账号 */
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.phone)) {
        // 验证成功
        return true;
      } else {
        // 验证失败
         this.$toast({
              message: "账号输入有误",
              position: "center",
              duration: 1000,
            });
        return false;
      }
    }
}
</script>

 我们首先在data里面保存好手机号密码phone和pwd，然后我们在method里面可以验证手机号和密码的正则表达式，然后通过判断是否与数据库里面有重复信息来判断是否能够通过验证。

this.$toast是个弹框来提醒用户登录是否成功

this.$toast({
              message: "密码输入有误",
              position: "center",
              duration: 1000,
            });

 登录状态可以用localStorage来进行封装，代码里面已经出现，可以看我的另一个文章讲保存登陆状态。