Regular Verification of input Label in vue

One of the problems encountered today is the verification of regular mobile phone numbers for input in vue
Here is today's code, written in js, without elementUI. The code is as follows:

<!-- Declaration of mobile phone number -->
      <div class="phonea">
        <span>Declaration of mobile phone number</span>
        <input
          class="phone input-style "
          :class="{'err-input' : phone.err}"
          v-model="phone.val"
          type="text"
          placeholder="Please enter your cell phone number."
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          @blur="test()"
        >
        <span v-show="hintShow">{{hint}}</span>
      </div>
<!-- Exchange mobile phone number -->
 <div class="tela">
        <span>Convertible mobile phone number</span>
        <input
          class="tel input-style "
          :class="{'err-input' : tel.err}"
          v-model="phone1.val"
          type="text"
          placeholder="Please enter your cell phone number."
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          @blur="teltest()"
        >
        <span v-show="telShow">{{tel}}</span>
      </div>
    

There's also a lot of information on the Internet, but it's not suitable for my scenario. Here's my regular verification of two input tags.

<script>
/* eslint-disable */
export default {
  data () {
    return {
      hintShow: false,  // Prompt display
      hint: 'Error in mobile phone number', // Prompting language
      telShow: false,  // Prompt display
      tel: 'Error in mobile phone number', // Prompting language

      /*
      *  val Value, err error display, test check information
      * */
      phone: {
        val: '',
        err: false,
        pass: false,
      },
      phone1: {
        val: '',
        err: false,
        pass: false,
      }
    };
  },
  methods: {
    // Mobile number verification
    test: function () {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (this.phone.val == '' || this.phone.val.length <= 10 || !reg.test(this.phone.val)) {
        this.hintShow = true
        this.hint = 'Error in mobile phone number'
        this.err = true
        return false

      } else {
        this.hintShow = false
        this.hint = 'Correct mobile phone number'
        this.err = false
        return true
      }
    },
    teltest () {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (this.phone1.val == '' || this.phone1.val.length <= 10 || !reg.test(this.phone1.val)) {
        this.telShow = true
        this.tel = 'Error in mobile phone number'
        this.err = true
        return false

      } else {
        this.telShow = false
        this.tel = 'Correct mobile phone number'
        this.err = false
        return true
      }
    },
  }
}
</script>

Write all the methods in methods, and then call them directly when the input tag is out of focus (blur).

Tags: Mobile Vue

Posted on Sat, 12 Oct 2019 10:48:32 -0700 by dhrosti