Vue 电话号码验证 - Shell-Bash

在实现注册、登录等功能时，我们经常需要对用户输入的电话号码进行验证。而使用 Vue.js 框架可以更加方便地实现这一功能。

Vue.js 电话号码验证组件

下面是一个基于 Vue.js 的电话号码验证组件示例。使用该组件可以非常方便地验证用户输入的电话号码是否合法。

<template>
  <div>
    <input type="text" v-model="phoneNumber">
    <button @click="checkPhoneNumber">验证电话号码</button>
    <div v-if="phoneNumberValid">电话号码合法！</div>
    <div v-else>电话号码不合法！</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      phoneNumber: '',
      phoneNumberValid: false
    }
  },
  methods: {
    checkPhoneNumber () {
      const regx = /^1[3456789]\d{9}$/
      this.phoneNumberValid = regx.test(this.phoneNumber)
    }
  }
}
</script>

使用该组件只需要在需要验证电话号码的页面中引入该组件即可。示例如下：

<template>
  <div>
    <h1>注册页面</h1>
    <phone-number-validator></phone-number-validator>
    ...
  </div>
</template>

<script>
import PhoneNumberValidator from './PhoneNumberValidator.vue'

export default {
  components: {
    PhoneNumberValidator
  }
}
</script>

组件说明

上面的示例代码中，我们使用了三个属性和一个方法：

属性：

• phoneNumber：保存用户输入的电话号码；
• phoneNumberValid：保存电话号码是否合法的状态值，初值为 false。

方法：

• checkPhoneNumber()：验证用户输入的电话号码是否合法。

其中，我们使用了正则表达式 ^1[3456789]\d{9}$ 来验证电话号码。该正则表达式表示：以 1 开头，第二个数字必须是 3、4、5、6、7、8 或 9 中的一个，后面跟着任意数字，共计 11 位数字。

验证结果

在用户输入完电话号码并点击“验证电话号码”按钮后，该组件会显示电话号码是否合法。如果合法，显示 “电话号码合法！”；如果不合法，显示 “电话号码不合法！”。这个结果是通过绑定 phoneNumberValid 属性，动态渲染组件来实现的。