Use js to verify the mobile phone number, password, email, etc. in the input box in vue

Note:

    1. The input box in this article is <input></input>, not <el-input></el-input>.

    2. Bind the blur method to use @blur, not onblur (error will be reported)

1. HTML part:

<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>

Among them: { {s_telephone1}} in <div class="errorDiv">{ {s_telephone1}}</div> is the error message

Two, js part

<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>

3. Realize the effect

1. No operation is performed

2. Click the mobile phone number input box, but do not enter any information

 

 3. Click the mobile phone number input box and enter the wrong information

reference:

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

HTML form verification (including user name, password, email, mobile phone number, verification code-verification)

Digression:

The use of input and lable in vue is to achieve input animation effects, which has nothing to do with this article. I will write again when I have time. The effect is similar to that of Xiaomi’s official website: Xiaomi account- login (xiaomi.com)

Slightly similar to the writing below, you can read it if you are interested

A good-looking input input animation_Qianqiu,'s blog-CSDN blog