el-input校验手机号

可以通过正则表达式来校验手机号码，以下是一个示例代码：

<el-input v-model="phone" placeholder="请输入手机号码" @blur="checkPhone"></el-input>

export default {
  data() {
    return {
      phone: ''
    }
  },
  methods: {
    checkPhone() {
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(this.phone)) {
        this.$message.error('请输入正确的手机号码');
      }
    }
  }
}

在上面的代码中，`@blur`事件会在输入框失去焦点时触发，调用`checkPhone`方法进行手机号码校验。校验使用了正则表达式，如果匹配失败则提示用户重新输入。

相关问题

el-input校验手机号码

你可以使用 el-form 和 el-form-item 来包裹 el-input，并设置 rules 属性来校验手机号码。具体实现可以参考以下代码：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="formData.phone"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

在上述代码中，rules 中的 phone 规则数组包含两个校验规则，分别是必填规则和手机号码格式规则。其中，required 和 pattern 分别表示必填和正则校验，message 是校验失败后的提示信息，trigger 表示触发校验的事件，这里设置为 blur，即失去焦点时触发校验。

el-input校验手机号。

你可以使用正则表达式来验证手机号码，如下所示：

<template>
  <div>
    <el-input v-model="mobile" placeholder="请输入手机号码" :class="{'is-error': !isMobileValid}" @blur="validateMobile"></el-input>
    <p v-show="!isMobileValid" class="error-msg">请输入正确的手机号码</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
      isMobileValid: true
    }
  },
  methods: {
    validateMobile() {
      const reg = /^[1][3-9][0-9]{9}$/;
      if (!reg.test(this.mobile)) {
        this.isMobileValid = false;
      } else {
        this.isMobileValid = true;
      }
    }
  }
}
</script>

<style scoped>
.is-error .el-input__inner {
  border-color: #f56c6c;
}
.error-msg {
  color: #f56c6c;
  margin-top: 5px;
}
</style>

在上面的示例中，我们使用了一个正则表达式来验证手机号码，如果输入的手机号码不是11位数字，或者不是以1开头的话，就会显示验证错误的提示信息。同时，我们通过v-model绑定了输入框的值，通过@blur事件来触发校验，最后使用v-show来控制错误提示信息的显示。