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

elementUI输入框只能输入数字解决方案相关推荐

实现elementui输入框只能输入数字和一个小数点
//@input对应的函数下this.params.CFee = val.replace(/[^\d^\.]+/g, '').replace('.', '$#$').replace(/\./g, '' ...
js限制输入框只能输入数字
分享下js限制输入框中只能输入数字的方法,包括整数与小数,分享几个例子,有需要的朋友参考下. 1.使用正则表达式限制输入框只能输入数字: 1 <input type="text&quo ...
input输入框只能输入数字，只能输入字母数字组合
input输入框只能输入数字,字母数字组合,汉字等 input里需要控制输入的类型,可以通过onkeyput或oninput对输入的内容进行校验.输入大小写字母.数字.下划线:onkeyup=&quo ...
要求输入框只能输入数字跟破折号
要求输入框只能输入数字跟破折号让输入框接受像"1234-123456789"这样的数字让输入框接受像"1234-123456789"这样的数字 <a- ...
通过javascri实现输入框只能输入数字
输入框只能输入数字 <input type="text" οnkeyup="value=value.replace(/[^\d]/g,'');"> ...
【 javascript】＜input＞实现输入框只能输入数字（个人认为最好的）
<input> 实现输入框只能输入数字需求背景: 方案一:使用`JS`限制 input 输入框只能输入纯数字方案二:`VUE`使用`a-input-number组件`限制 input ...
控制输入框只能输入数字
1.将input的属性type改为number 2.这时的输入框会有小箭头, 去掉小箭头的方法,给input添加样式 input::-webkit-outer-spin-button,input::- ...
html input输入框只能输入数字只能输入字母数字组合
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
element-ui input 只能输入数字保留两位小数
首先在输入框中加上input事件, 等数据化处理完成后在进行赋值 <el-input v-model="item.price" placeholder="请输入&q ...

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

elementUI输入框只能输入数字解决方案相关推荐

最新文章

热门文章