解决element-ui表单中限制输入纯数字的问题

20,404 阅读2分钟

先看需求:

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验证和整个表单验证的冲突,整个表单验证前要把模拟的验证去掉,不然会有两个'请完成必填项'