轻松搞定！Vue+ElementUI el-input输入框手机号校验详细指南

前端

2022-12-03 18:47:49

轻松搞定！Vue + ElementUI el-input 输入框手机号校验详细指南

手机号校验的重要性

在当今数字化时代，收集准确的用户信息至关重要。手机号作为一种广泛使用的联系方式，需要进行严格的校验，以确保数据的准确性和可靠性。通过对手机号进行校验，我们可以：

防止虚假或无效的手机号输入
提高用户体验，避免因输入错误而造成不便
保证数据完整性，为后续业务处理提供可靠的基础

使用 Vue + ElementUI 实现手机号校验

Vue.js 是一个流行的前端框架，ElementUI 是其一个强大的 UI 库，提供了丰富的组件来简化开发过程。借助 Vue + ElementUI，我们可以轻松实现 el-input 输入框的手机号校验功能。

步骤指南

1. 数字类型的输入限制

首先，我们需要将 el-input 输入框的 type 属性设置为 "number"，这样就可以限制用户只能输入数字。代码如下：

<el-input type="number" v-model="phoneNumber"></el-input>

2. 11 位数的限制

手机号一般为 11 位数字，我们需要进一步限制用户输入的数字长度。通过设置 maxlength 属性，可以限制输入框的最大长度为 11 位。代码如下：

<el-input type="number" v-model="phoneNumber" maxlength="11"></el-input>

3. 正则表达式校验

正则表达式是一种强大的模式匹配工具，我们可以利用它来校验手机号的格式。对于手机号校验，我们可以使用以下正则表达式：

/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/

这个正则表达式可以匹配所有以 13、14、15、16、17、18、19 开头的 11 位数字，符合中国大陆的手机号格式。

我们将正则表达式添加到 el-input 输入框的 pattern 属性中，代码如下：

<el-input type="number" v-model="phoneNumber" maxlength="11" pattern="/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/"></el-input>

这样，当用户输入的手机号不符合正则表达式时，就会收到错误提示。

4. 实际应用

以上步骤完成了手机号校验功能的实现。下面是一个实际应用的例子：

<template>
  <el-form :model="form">
    <el-form-item label="手机号" prop="phoneNumber">
      <el-input v-model="form.phoneNumber" placeholder="请输入您的手机号"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const form = ref({})

    const submitForm = () => {
      console.log(form.value)
    }

    return {
      form,
      submitForm
    }
  }
}
</script>