借鉴地址
需求描述
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");},}