Vue登录注册判断验证

View下Login.vue（登录）组件代码示例

  <div class="detail-box">
    <el-button icon="el-icon-arrow-left" @click="$router.back()"
      >返回</el-button
    >
    <div class="main_detail">
      <!-- 放大镜组件 -->
      <!-- <div class="left">

            </div> -->
      <zoom-image :imgs="showImgs"></zoom-image>
      <!-- 商品的信息 -->
      <div class="right">
        <h2 class="title">{{ goodsData.title }}</h2>
        <p class="supplier">{{ goodsData.supplier }}</p>
        <p class="price">￥{{ goodsData.priceStr }}</p>
        <el-rate
          :value="3.7"
          disabled
          show-score
          text-color="#ff0000"
        ></el-rate>
        <el-button
          type="danger"
          icon="el-icon-shopping-cart-2"
          @click="addCart(goodsData.Id)"
          >添加购物车</el-button
        >
      </div>
    </div>

    <!-- 类似商品 -->
    <div class="same">
      <p>类似商品</p>
      <good-list :list="sameList"></good-list>
    </div>

    <div class="footer">
      <img src="../assets/footer.png" alt="" />
    </div>
  </div>
</template>

<script>
import { detailData, sameGoodData, addShopCart } from "../tools/ajax.js";
import zoomImage from "../components/ZoomImage.vue";
import goodList from "../components/GoodList.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodsData: {}, //商品对象
      showImgs: [], //放大镜组件需要显示的几张图片
      sameList: [], //同店铺的其他类似的商品
    };
  },
  components: {
    zoomImage,
    goodList,
  },
  computed: {
    ...mapState(["token"]),
  },
  created() {
    this.getDetailData(this.$route);
    document.scrollingElement.scrollTop = 0;
  },
  beforeRouteUpdate(to, from, next) {
    this.getDetailData(to);
    document.scrollingElement.scrollTop = 0;
    next();
  },
  methods: {
    // 获取详情的数据
    getDetailData(to) {
      detailData({
        goodId: to.query.gId,
      }).then((data) => {
        console.log(data);
        this.goodsData = data[0]; //本页面要用的数据
        this.showImgs = JSON.parse(data[0].imgs);

        // 需要根据制造商取出类似的商品
        this.getSameData(data[0].supplier);
      });
    },

    // 获取类似商品的数据
    getSameData(supply) {
      sameGoodData({
        supplier: supply,
      }).then((data) => {
        this.sameList = data;
      });
    },
    addCart(id) {
        console.log(this.token)
      // 添加购物车的
      if (this.token) {
        //
        addShopCart({
          token: this.token,
          goodId: id,
        }).then((data) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              type: "success",
              message: "通行证已过期，请重新登录",
            });
            setTimeout(() => {
                this.$router.push("/login");
            }, 2000);
          }else if(data.code==1){
               this.$message({
              type: "success",
              message: "添加成功",
            });
          }else{
              this.$message({
              type: "error",
              message: "系统繁忙，请刷新尝试",
            });
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "亲，你还没登录，请登录",
        });
        setTimeout(() => {
          this.$router.push("/login");
        }, 2000);
      }
    },
  },
};
</script>

<style scoped>
.detail-box {
  text-align: left;
  width: 1100px;
  margin: auto;
}
.main_detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  width: 200px;
  height: 240px;
  border: 1px solid red;
  padding: 10px;
}
.right {
  width: 200px;
  height: 240px;
  margin-right: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}
.title {
  font-size: 20px;
}
.supplier {
  color: gray;
}
.price {
  color: red;
}
.same {
  margin-top: 20px;
}
.same p {
  padding-bottom: 10px;
  border-bottom: 1px solid gray;
  /* padding: 20px; */
}
</style>

View下Register.vue（注册）组件代码示例

    <div class="register-box">
        <el-input class="eit" placeholder="请输入账号" v-model.trim="userName" @focus="userNameErr=''">
             <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
        <span v-show="userNameErr" class="err">{{userNameErr}}</span>


         <el-input class="eit" type="password" placeholder="请输入密码" v-model.trim="password" @focus="passwordErr=''">
             <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
        <span v-show="passwordErr" class="err">{{passwordErr}}</span>


     <el-input class="eit" type="password" placeholder="请再次输入密码" v-model.trim="comfirmPsw" @focus="comfirmPswErr=''">
             <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
        <span v-show="comfirmPswErr" class="err">{{comfirmPswErr}}</span>

        <el-button type="primary" @click="registerClick">注册</el-button>

 </div>
</template>

<script>
import {registerData} from "../tools/ajax.js"
export default {
     data() {
            return {
                userName:"" , // 用户名
                userNameErr:"" ,// 用户名错误提示
                password:"",
                passwordErr:"",
                comfirmPsw:"",
                comfirmPswErr:""
            }
        },
        methods: {
            registerClick(){
                var userReg = /^[\w\u4e00-\u9fa5]{6,12}$/
                if(!userReg.test(this.userName)){
                    this.userNameErr = "账号必须是字母、数字、下划线、汉字等组成"
                    return false
                }

                var pswReg = /^[\w]{6,12}$/
                if(!pswReg.test(this.password)){
                    this.passwordErr = "密码必须是6-12位的字母、数字、下划线组成"
                    return false
                }
                if(this.password!=this.comfirmPsw){
                    this.comfirmPswErr = "俩次密码不一致"
                    return false
                }

                registerData({
                   userName:this.userName,
                   password:this.password 
                }).then(data=>{
                    if(data.code===1){
                        this.$message({
                            type:"success",
                            message:"恭喜注册成功，可以去登录啦",
                            duration:1000,
                            onClose:()=>{
                                this.$router.replace("/login")
                            }
                        })
                    }else{
                        this.$message({
                            type:"warning",
                            message:"账号已经存在",
                            duration:1000     
                        })
                    }
                    this.userName = this.password= this.userNameErr=this.passwordErr=this.comfirmPswErr=this.comfirmPsw=""
                })

            }
        },
}
</script>

<style scoped>
  .register-box{
       width: 400px;
       margin: 80px auto; 
   }
   .eit{
       margin-top: 20px;
       width: 100%;
   }
   .register-box >>> button{
       width: 100%;
       margin-top: 20px;
   }
   .err{
       color:red;
       font-size: 12px;
   }
</style>