el-input校验手机号

可以使用 el-form 和 el-form-item 以及 el-input 组件来校验手机号。

1. 首先，需要在 el-form-item 中添加 prop 属性，指定校验规则的属性名，例如"phone"。

2. 在 el-input 中添加 v-model 属性，绑定一个数据对象，例如"formData.phone"。

3. 在 el-form-item 中添加 rules 属性，指定校验规则，例如：

<el-form-item label="手机号" prop="phone" :rules="[
  { required: true, message: '请输入手机号', trigger: 'blur' },
  { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
]">
  <el-input v-model="formData.phone"></el-input>
</el-form-item>

其中，required 表示必填项，pattern 表示正则表达式校验。

4. 在表单提交时，可以通过 el-form 的 validate 方法来触发校验：

this.$refs.form.validate((valid) => {
  if (valid) {
    // 校验通过，可以提交表单数据
  } else {
    // 校验不通过，提示错误信息
  }
})

完整示例代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px">
    <el-form-item label="手机号" prop="phone" :rules="[
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
    ]">
      <el-input v-model="formData.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: ''
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 校验通过，可以提交表单数据
        } else {
          // 校验不通过，提示错误信息
        }
      })
    }
  }
}
</script>