Vue+elementUI el-input输入框手机号校验

在Vue中使用elementUI的el-input组件进行手机号验证，可以通过添加@input事件监听器来实现。以下是一个简单的例子：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="phoneNumber">
      <el-input
        v-model="form.phoneNumber"
        placeholder="请输入手机号"
        @input="handlePhoneInput"
      ></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        phoneNumber: ''
      },
      rules: {
        phoneNumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handlePhoneInput(value) {
      // 使用正则表达式去除非数字字符
      this.form.phoneNumber = value.replace(/[^\d]/g, '');
      // 如果输入已经是完全符合规则的手机号，则不需要进一步处理
      if (/^1[3-9]\d{9}$/.test(this.form.phoneNumber)) {
        // 如果输入正确，则停止处理，否则会清空输入
        return;
      }
      // 如果输入不完整，则清空输入
      this.form.phoneNumber = '';
      this.$message.error('手机号格式不正确');
    }
  }
};
</script>

在这个例子中，我们定义了一个表单项phoneNumber，并为它添加了一个el-input组件。我们还定义了一个handlePhoneInput方法，该方法会在输入时被触发。在这个方法中，我们使用正则表达式/^1[3-9]\d{9}$/来验证手机号，并去除任何非数字字符。如果输入的手机号格式不正确，我们清空输入并显示一个错误消息。这样可以确保用户只能输入合法的手机号。