el-input针对手机号的校验优化

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_36070288/article/details/100917245

注意：以下代码均只展示与本文相符的内容，并不提供完整项目代码

先看代码

tool.js文件：

function isvalidPhone (str) {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
  return reg.test(str)
}

export default {
  isvalidPhone
}

 el-input相关组件：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
   <el-form-item prop="phone">
      <el-input v-model="ruleForm.phone" placeholder="请输入联系人电话" @input="checkLength" type="number"></el-input>
   </el-form-item>
</el-form>

<script>
import tool from '@/utils/tool'
const validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!tool.isvalidPhone(value)) {
    callback(new Error('请输入正确手机号码'))
  } else {
    callback()
  }
}
export default {
  data () {
    return {
      ruleForm: {
        phone: ''
      },
      rules: {
        phone: [
          {required: true, trigger: 'blur', validator: validPhone}
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    checkLength (e) {
      if (e.length > 11) {
        this.ruleForm.phone = e.slice(0, 11)
      }
    }
  }
}
</script>

当type="number"时，输入框右侧有上下箭头

隐藏箭头的方法如下：（以下代码文件名为.styl结尾，不清楚的可以了解下stylus）

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
  -webkit-appearance none
input[type="number"]
  -moz-appearance textfield

总结

以上代码解决问题如下：

1. 通过type="number"限制只能输入数字；
2. 由于maxlength不生效，所以这里使用@input监听输入长度，一旦长度大于11进行截取，满足了maxlength=11的效果；
3. 通过rules校验可以提示用户输入手机号不能为空，且输入的手机号得满足我们的正则要求，不满足则提示用户手机号输入有误