elementUI输入框只能输入数字解决方案

借鉴地址
需求描述
1.只能输入数字
2.控制输入11位
3.验证如果不是11位提示错误
4.当输入时取消验证，没有错误提示

问题
1.el-input type=number e仍然可以输入，方案pass
2.利用wach监听el-input的值，并没有实时变化
3.el-form-item中的prop对于原生input是没有验证功能的

解决方案
1.将el-input改成input，加上class
2.手动验证validateField
3.输入时取消验证clearValidate

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
	<el-form-item label="手机号" prop="telephone" label-width="60px">
	    <input class="el-input__inner" 
	      maxlength="11"
	      v-model="ruleForm.telephone"
	      placeholder="请输入11位手机号"
	      @input="handlerInput"
	      @blur="handlerBlur"
	    >
	</el-form-item>
</el-form>

data() {
  var checkNumber = (rule, value, callback) => {
    if (value === "") {
      callback();
    } else if (String(value).length != 11) {
      callback(new Error("请输入11位手机号"));
    } else {
      callback();
    }
  };
  return {
    ruleForm: {
      //查询条件
      telephone: "",
    },
    rules: {
      telephone: [{ validator: checkNumber, trigger: 'blur' }],
    }
  };
},
watch:{
	'ruleForm.telephone': function (curVal, oldVal) {
        if (!curVal) {
            this.ruleForm.telephone = ''
            return false
        }
        // 实时把非数字的输入过滤掉
        this.ruleForm.telephone = curVal.match(/\d/ig) ? curVal.match(/\d/ig).join('') : ''
    },
},
methods:{
	handlerInput(){
      this.$refs['ruleForm'].clearValidate("telephone");
    },
    handlerBlur(){
      this.$refs['ruleForm'].validateField("telephone");
    },
}