<input 添加手机号校验

您可以通过 JavaScript 来实现添加手机号校验。以下是一个简单的示例：

<label for="phone">手机号：</label>
<input type="text" id="phone" name="phone" required>

<script>
  const phoneInput = document.getElementById('phone');
  phoneInput.addEventListener('input', function(event) {
    const phone = event.target.value;
    const regex = /^1[3-9]\d{9}$/;
    if (!regex.test(phone)) {
      phoneInput.setCustomValidity('请输入正确的手机号');
    } else {
      phoneInput.setCustomValidity('');
    }
  });
</script>

该代码会在输入框输入内容时对手机号进行校验，如果手机号不符合规则，则会显示错误提示信息。其中，正则表达式 `^1[3-9]\d{9}$` 匹配了以数字 1 开头，第二位为 3-9 的数字，后面跟着 9 位数字的手机号格式。您可以根据自己的需求修改正则表达式。

相关问题

el-input 手机号校验

要在 el-input 中进行手机号校验，您可以使用正则表达式来检查输入的手机号是否符合规定的格式。以下是一个示例代码：

<template>
  <el-input v-model="phoneNumber" type="tel" placeholder="请输入手机号"></el-input>
  <el-button type="primary" @click="validatePhoneNumber">确定</el-button>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: ''
    }
  },
  methods: {
    validatePhoneNumber() {
      const regex = /^1[0-9]{10}$/; // 手机号的正则表达式
      if (regex.test(this.phoneNumber)) {
        // 手机号格式正确，执行后续操作
        // ...
      } else {
        // 手机号格式不正确，给出提示信息或者阻止后续操作
        // ...
      }
    }
  }
}
</script>

在上述代码中，我们使用了正则表达式 `/^1[0-9]{10}$/` 来验证手机号的格式。这个正则表达式要求手机号以 1 开头，后面跟着 10 个数字。在 `validatePhoneNumber` 方法中，我们通过 `regex.test(this.phoneNumber)` 来检查输入的手机号是否符合这个正则表达式。如果符合，说明手机号格式正确，可以进行后续操作；如果不符合，说明手机号格式不正确，您可以根据需要给出相应的提示信息或者阻止后续操作。

el-input 手机号正则校验

根据提供的引用内容，el-input的手机号正则校验可以通过在Vue的data中定义一个phoneNumber的验证函数，并在rules中使用该验证函数进行校验。具体的实现步骤如下：

1. 在Vue的data中定义一个phoneNumber的验证函数，该函数接收三个参数：rule, value, callback。其中，rule是验证规则，value是输入的手机号码，callback是回调函数。
2. 在phoneNumber函数中，使用正则表达式对手机号进行验证。如果手机号为空，则通过callback函数返回一个错误信息，提示用户输入手机号。如果手机号不符合正则表达式的规则，则同样通过callback函数返回一个错误信息，提示用户输入正确的手机号。如果手机号符合正则表达式的规则，则通过callback函数返回一个空值，表示验证通过。
3. 在Vue的rules中，对phone字段进行校验。使用validator属性指定phoneNumber函数作为验证函数，并设置message属性为"请输入正确的手机号"，trigger属性为"blur"，表示在失去焦点时进行校验。
4. 在el-input组件中，使用v-model指令绑定ruleForm.phone字段，将输入的手机号码与Vue的data中的phone字段进行双向绑定。
5. 在el-form组件中，使用:rules属性将rules绑定到el-form组件上，实现手机号的正则校验。

综上所述，可以通过以上步骤实现el-input的手机号正则校验。
#### 引用[.reference_title]
- *1* *2* [el-form-item中的el-input加上正则校验](https://blog.csdn.net/m0_58266149/article/details/126954372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-input手机号，座机号，邮箱，银行卡，邮编，传真验证](https://blog.csdn.net/csdnyp/article/details/118762677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]