vue登录 验证 手机号码

首先给文本框设置 type=“number” 属性

    <div class="layui-fulid" id="house-login" >
      <div class="layui-form">
        <p>手机号登录</p>
        <div class="layui-input-block login">
          <i class="layui-icon layui-icon-house-mobile"></i>
          <input type="number" required lay-verify="required"  placeholder="请输入手机号"  v-model="loginForm.phone"   @input="handerInput" class="layui-input">
        </div>
        <div class="layui-input-block getCode">
          <input type="number" required lay-verify="required"   placeholder="请输入短信验证码" v-model="loginForm.code"  class="layui-input">
          <button class="layui-btn" @click="getCode">获取验证码</button>
        </div>
        <button class="layui-btn"  lay-submit lay-filter="user-login" @click="login" @keyup.enter="keyDown">登录</button>
      </div>
    </div>

methods中判断输入的内容

 data(){
      return {
        loginForm:{
          phone:"",
          code:""
        },
      }
    },
    methods:{

    //获取验证码
    getCode(){
      //判断手机号码是否正确
     if (this.loginForm.phone.length <= 0) {
        this.$message.error("请输入手机号");
      }else if(!(/^1[3-9][0-9]\d{8}$/.test(this.loginForm.phone))){
        this.$message.error("请输入正确手机号");
      }
      //发起请求
      getCode(this.loginForm.phone).then(res=>{
        if(res.data.code!=200){
          this.$message.error("获取验证码失败,请检查手机号码是否正确")
        }
      })

    },
    //登录
    login(){
      //发起请求
      login(this.loginForm).then(res=>{
        if(res.data.code==200){
          localStorage.setItem("token",res.data.data);
          this.$message.success("登录成功")
          //跳转首页
          this.$router.push('/ProductList');
        }
      })
    },
    keyDown(e){
      //如果是回车则执行登录方法
      if(e.keyCode == 13){
        //需要执行的方法
        this.login();
      }
    },
    // 判断自定义输入事件去掉 type="number 的  .
    handerInput() {
      // 判断不能输入小数点
      let str = '' + this.loginForm.phone;
      if (str.indexOf('.') !== -1) {
        let arr = str.split('');
        arr.splice(arr.length - 1);
        let str2 = arr.join('');
        this.loginForm.phone = +str2;
      }
    },
  },
   mounted () {
    //绑定事件
    window.addEventListener('keydown',this.keyDown);
  },
  //销毁事件
  destroyed(){
    window.removeEventListener('keydown',this.keyDown,false);
  },

去掉 type="number 上下箭头

<style scoped>

  input[type=number] {
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>