注：

    1、本文的input框为<input></input>,不是<el-input></el-input>。

    2、绑定blur方法使用@blur，不可用onblur（会报错）

一、html部分：

<template>
  <div>
    <!--手机号-->
    <div class="error">
       <div class="input-fill-x" >
           <input v-model="param.account" class="input-control input-fill" 
                  placeholder="手机号码"
                  id="telephone" @blur="checkPhone()" >
            <label class="input-label">手机号码</label>
        </div>
        <div class="errorDiv">{{s_telephone1}}</div>
    </div>
    <!--密码-->
    <div class="error">
       <div class="input-fill-x" >
           <input v-model="param.password" class="input-control input-fill" 
                  placeholder="密码"
                  :type="pwdType===true ?'password' :'text' " id="password" 
                  @blur="checkPasswords()">
              <label class="input-label">密码</label>
        </div>
        <div class="errorDiv">{{s_password1}}</div>
    </div>    
  </div>
</template>

其中：<div class="errorDiv">{{s_telephone1}}</div>的{{s_telephone1}}为错误提示信息

二、js部分

<script>

export default {
  name: 'UserLogin',  //vue的name
  data() {
    return {
      param: {
      }
      s_telephone1:"",//手机号错误提示信息初始为空
      s_password1:"",//密码错误提示信息初始为空
    };
  },
  methods:{    
        //手机号1校验
        checkPhone(){
          //定义phone，通过唯一id拿到input框输入的值
          const phone = document.getElementById('telephone').value; 
          if(!(/^1[34578]\d{9}$/.test(phone))) {  //手机号正则校验
            if(phone===''){ //若手机号为空
              this.s_telephone1 = "请输入手机号码";
              return false;
            }else { //手机号非空的报错信息
              this.s_telephone1 = "手机号码格式错误";
              return false;
            }
          }else{ //手机号正确则无错误信息
            this.s_telephone1 = "";
            return true;
          }
        },
        // 密码校验
        checkPasswords(){  
          //定义password，通过唯一id拿到input框输入的值
          const password = document.getElementById('password').value;   
          if(!(/^[a-zA-Z][a-zA-Z0-9]{7,19}$/.test(password))){ //密码正则校验
            if(password===''){ //若密码为空
              this.s_password1 = "请输入登录密码";
              return false;
            }else { //密码非空的报错信息
              this.s_password1 = "密码8-20位,包含字母和数字,字母开头,不可以有特殊符号";
              return false;
            }
          }else{ //密码正确则无错误信息
            this.s_password1 = "";
            return true;
          }
        },

  },
}

</script>

三、实现效果

1、未进行任何操作

2、点击手机号码input框，但未输入任何信息

 

 3、点击手机号码input框，输入错误信息

参考：

https://jingyan.baidu.com/article/b907e62797e19146e7891ccb.html

HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)_狙个栗子的博客-CSDN博客_html表单验证

题外话：

在vue中用input、lable是为了实现input动画效果，与本文无关了，有时间再写，实现效果类似小米登陆官网：小米帐号 - 登录 (xiaomi.com)

略微类似下文写法，感兴趣可看

一个好看的input输入动画_千秋，的博客-CSDN博客