cari

Rumah  >  Artikel  >  pembangunan bahagian belakang  >  简单实现手机号银行卡的同步显示功能 - 我的专栏 思否

简单实现手机号银行卡的同步显示功能 - 我的专栏 思否

不言
不言asal
2018-03-30 11:50:431874semak imbas

本篇文章就是给大家分享了关于简单实现手机号银行卡的同步显示功能，有感兴趣的小伙伴可以看一下

简单实现手机号银行卡的同步显示功能

这是某盟的一道面试题  
难道不都是只要有了清晰的思路后边写边优化么  
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值  
处理focus和blur事件即可  
非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息

  2. 光标离开关闭预览信息

  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变

就是用计算属性判断即可

<template lang="html">
  <p class="zInput">
      <p class="big-show" v-show="showBig">{{txt2}}</p>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-model="txt">
  </p>
</template>

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            showBig: false,
        }
    },
    computed: {
        txt2: function () {
            if (this.txt.length > 0) {
                this.showBig = true
            }
            return this.getStr(this.txt, 4)
        }
    },
    methods: {
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

<style lang="less">
.zInput{
    position: relative;
    .big-show {
        position: absolute;
        top: -40px;
        font-size: 36px;
        line-height: 40px;
        background-color: red;
    }
}
.zInput{
    top:50px;
}
</style>

如果再加入个长度限制，则以上方法就不合适了,更换实现方案
v-model其实是个语法糖
分开写为v-bind:value和v-on:input

<template lang="html">
  <p class="zInput">
      <p class="big-show" v-show="showBig">{{txt2}}</p>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-bind:value="txt"
             v-on:input="handerInput">
  </p>
</template>

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            txt2: &#39;&#39;,
            showBig: false,
        }
    },
    methods: {
        handerInput (evt) {
            let val = evt.target.value.substr(0, 13)
            // 限制长度13位
            this.txt = val
            evt.target.value = val
            if (this.txt.length > 0) {
                this.showBig = true
            }
            this.txt2 = this.getStr(this.txt, 4)
        },
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup

那就在keydown时处理呗，但是keydown修改evt.target.value后  
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用  
必须要在handerInput时处理

<input type="text"
       @blur="handerBlur"
       @focus="handerFocus"
       @keyup="handerKeyup"
       @keydown="handerKeydown"
       v-bind:value="txt"
       v-on:input="handerInput">
<script>
       handerKeydown (evt) {
           console.log(&#39;handerKeydown&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里修改不起作用
       },
       handerKeyup (evt) {
           console.log(&#39;keyup&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里执行顺序靠后 修改无用
       },
       handerInput (evt) {
           let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, &#39;&#39;)
           console.log(&#39;handerInput__val&#39;, val)
           //这里拿到的val是纯数字
           evt.target.value = val
           this.txt = val
           if (this.txt.length > 0) {
               this.showBig = true
           }
           this.txt2 = this.getStr(this.txt, 4)
       },
</script>

                                               


简单实现手机号银行卡的同步显示功能


这是某盟的一道面试题  
难道不都是只要有了清晰的思路后边写边优化么  
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值  
处理focus和blur事件即可  
非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息

  2. 光标离开关闭预览信息

  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变

就是用计算属性判断即可

<template lang="html">
  <p class="zInput">
      <p class="big-show" v-show="showBig">{{txt2}}</p>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-model="txt">
  </p>
</template>

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            showBig: false,
        }
    },
    computed: {
        txt2: function () {
            if (this.txt.length > 0) {
                this.showBig = true
            }
            return this.getStr(this.txt, 4)
        }
    },
    methods: {
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

<style lang="less">
.zInput{
    position: relative;
    .big-show {
        position: absolute;
        top: -40px;
        font-size: 36px;
        line-height: 40px;
        background-color: red;
    }
}
.zInput{
    top:50px;
}
</style>

如果再加入个长度限制，则以上方法就不合适了,更换实现方案
v-model其实是个语法糖
分开写为v-bind:value和v-on:input

9116fe449ac52b01331f03f825620b05
  bd5485bf241f8f25600f58d724cbf170
      40dd2db874b79f659b9bd9db3ca6e62e{{txt2}}94b3e26ee717c64999d7867364b1b4a3
      3d4998b3e102650fd14aa74928ea3a81
  94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
    name: 'z-input',
    data () {
        return {
            txt: '',
            txt2: '',
            showBig: false,
        }
    },
    methods: {
        handerInput (evt) {
            let val = evt.target.value.substr(0, 13)
            // 限制长度13位
            this.txt = val
            evt.target.value = val
            if (this.txt.length > 0) {
                this.showBig = true
            }
            this.txt2 = this.getStr(this.txt, 4)
        },
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = ''
            for (var i = 0; i 11acf8853db579d63489c23499573767 0) {
                    newStr += str.charAt(i) + '_'
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup

那就在keydown时处理呗，但是keydown修改evt.target.value后  
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用  
必须要在handerInput时处理

<input type="text"
       @blur="handerBlur"
       @focus="handerFocus"
       @keyup="handerKeyup"
       @keydown="handerKeydown"
       v-bind:value="txt"
       v-on:input="handerInput">
<script>
       handerKeydown (evt) {
           console.log(&#39;handerKeydown&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里修改不起作用
       },
       handerKeyup (evt) {
           console.log(&#39;keyup&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里执行顺序靠后 修改无用
       },
       handerInput (evt) {
           let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, &#39;&#39;)
           console.log(&#39;handerInput__val&#39;, val)
           //这里拿到的val是纯数字
           evt.target.value = val
           this.txt = val
           if (this.txt.length > 0) {
               this.showBig = true
           }
           this.txt2 = this.getStr(this.txt, 4)
       },
</script>

  相关推荐：

使用正则验证用户输入的银行卡号（附代码）

js、jq如何验证银行卡账号代码分享

手机号码、电子邮箱、身份证、银行卡正则验证实例

Atas ialah kandungan terperinci 简单实现手机号银行卡的同步显示功能 - 我的专栏 思否. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：TP框架如何实现php数据导出word详解Artikel seterusnya：PHP生成带logo图像二维码的两种方法

Artikel berkaitan

Lihat lagi