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");},}