el-input針對手機號的校驗優化

注意：以下代碼均只展示與本文相符的內容，並不提供完整項目代碼

先看代碼

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校驗可以提示用戶輸入手機號不能爲空，且輸入的手機號得滿足我們的正則要求，不滿足則提示用戶手機號輸入有誤