先看需求:
1. 必填
2. 只能输入纯数字(e也不行)
3. 记录已输入字符长度
遇到的问题
el-input自带原生的 type="number"存在两个问题:
1. 首先,type="number"允许输入e
2. 其次,maxlength属性也不生效
解决办法
<template>
<el-input maxlength="30"
v-model="pureNumber"
placeholder="请输入纯数字">
<div class="input-limit">{{pureNumber.length}}/30</div>
</template>
<script>
watch:{
'pureNumber': function (curVal, oldVal) {
if (!curVal) {
this.pureNumber = ''
return false
}
// 实时把非数字的输入过滤掉
this.pureNumber = curVal.match(/\d/ig) ? curVal.match(/\d/ig).join('') : ''
}
}
</script>
这时候又遇到一个问题,el-input没有实时变化,看了一下源码,是const引起的,所以弃用el-input用原生input标签,加上element的样式,看起来和el-input一样。这时候就解决了双向绑定的问题
<input class="el-input__inner"
maxlength="30"
v-model="pureNumber"
placeholder="请输入纯数字">
注意一下
<el-form-item label="纯数字:" prop="pureNumber">
<input class="el-input__inner"
maxlength="30"
v-model="pureNumber"
placeholder="请输入纯数字">
<div class="input-limit">{{pureNumber.length}}/30</div>
</el-form-item>
此时el-form-item中的prop对于原生input是没有验证功能的,所以我们手动验证,模拟el-input的验证行为,主要通过给input标签加@blur监听失去焦点事件
举个例子
模拟blur验证必填的功能,这是element的写法
rules:{
pureNumber:[
{
required: true,
message: '请完成必填项',
trigger: 'blur'
}
]
}
我们要这样写
<el-form-item label="纯数字:" prop="pureNumber" ref="numberElement">
<input class="el-input__inner"
maxlength="30"
v-model="pureNumber"
placeholder="请输入纯数字"
@blur="handleBlur">
<div class="input-limit">{{pureNumber.length}}/30</div>
</el-form-item>
methods:{
handleBlur(e){
let xxx = this.$refs['numberElement'].$el
if (event.target.value === '') {
// 输入框变红色
xxx.classList.add('is-error')
xxx.classList.remove('is-success')
} else {
// 输入框变绿色
xxx.classList.add('is-success')
xxx.classList.remove('is-error')
}
}
}
以上只是模拟了输入框变色,模拟提示信息你们就自行解决吧。
我项目里还处理了模拟input验证和整个表单验证的冲突,整个表单验证前要把模拟的验证去掉,不然会有两个'请完成必填项'