精品源码/6格验证码/自动填充资源-CSDN文库

共6个文件

js：3个

png：1个

html：1个

vue

验证码

组件

自动填充

网页设计

需积分: 5 17 浏览量 2023-01-10 17:15:51 上传评论收藏 98KB RAR 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

vue移动端6格验证码.rar （6个子文件）

vue移动端6格验证码

rem.js 2KB

jquery-1.10.2.js 315B

vue.min.js 90KB

使用必读.png 61KB

css

index.css 3KB

index.html 15KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="screen-orientation" content="portrait"> <meta name="full-screen" content="no"> <meta name="x5-orientation" content="portrait"> <meta name="x5-fullscreen" content="false"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="format-detection" content="telephone=no"> <title>vue-6格验证码-支持自动填充</title> <script src="./js/rem.js"></script> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div id="wrapper" v-cloak> <div class="content"> <h2>{{ this.phone | mobileToStar }}</h2> <div class="input-box code"> <div class="input-content" @keydown="keydown" @keyup="keyup" @paste="paste" @mousewheel="mousewheel" @input="inputEvent"> <input ref="firstinput" v-model.trim.number="input[0]" class="code-text" max="9" min="0" maxlength="6" data-index="0" type="tel" :class="{'btnLight': iptFocus[1] || input[0]}" @focus="handleFocus(1)" @blur="handleBlur(1)"> <input v-model.trim.number="input[1]" class="code-text" max="9" min="0" maxlength="6" data-index="1" type="tel" :class="{'btnLight': iptFocus[2] || input[1]}" @focus="handleFocus(2)" @blur="handleBlur(2)"> <input v-model.trim.number="input[2]" class="code-text" max="9" min="0" maxlength="6" data-index="2" type="tel" :class="{'btnLight': iptFocus[3] || input[2]}" @focus="handleFocus(3)" @blur="handleBlur(3)"> <input v-model.trim.number="input[3]" class="code-text" max="9" min="0" maxlength="6" data-index="3" type="tel" :class="{'btnLight': iptFocus[4] || input[3]}" @focus="handleFocus(4)" @blur="handleBlur(4)"> <input v-model.trim.number="input[4]" class="code-text" max="9" min="0" maxlength="6" data-index="4" type="tel" :class="{'btnLight': iptFocus[5] || input[4]}" @focus="handleFocus(5)" @blur="handleBlur(5)"> <input v-model.trim.number="input[5]" class="code-text" max="9" min="0" maxlength="6" data-index="5" type="tel" :class="{'btnLight': iptFocus[6] || input[5]}" @focus="handleFocus(6)" @blur="handleBlur(6)"> </div> </div> <div class="form-button"> <button v-show="showTime" type="button" class="btn-submit" @click="sendCaptcha">重新发送</button> <button v-show="!showTime" type="button" class="btn-submit active"><span>重新发送（{{ count }}s）</span></button> </div> </div>  </div> <script type="text/javascript" src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="./js/vue.min.js"></script> <script> // problem: 点击短信通知栏的“复制”后，6位验证码会自动显示在软键盘左上角，点击一下即完成填充，某些 android 手机不生效，这个事件是 inputEvent，是先填充内容再进行处理的，但是输入框的 input maxlength 是1，如果更改该 maxlength 值为6可以实现填充，但是，如果从中间输入，最后一个输入框会输入最多6个值，输入完成后自动填充了最后一个输入框的6个值了。 // 如果有更好的解决办法，欢迎留言交流！ /* toast 提示：绑定在window上，使用方法：showMessage('提示信息', time) */ window.showMessage = function ($msg, $time, callback) { $time = $time === 0 ? 0 : ($time || 1000); var oDiv = document.createElement("div"); oDiv.setAttribute("id", "toastTip"); // var oBody = document.getElementsByClassName('wrapper')[0]; var oBody = document.getElementsByTagName('body')[0]; oBody.append(oDiv); $('#toastTip').text($msg); $('#toastTip').fadeIn(); setTimeout(function () { callback() $('#toastTip').fadeOut(function () { $('#toastTip').remove(); }); }, $time); } var mainVM = new Vue({ el: "#wrapper", data: { pasteResult: [], // 存放粘贴进来的数字 iptFocus: [], phone: 18800001111, smsCode: '', countryCode: '+86', showTime: true, count: '', // 初始化次数 timer: null, }, filters: { /** * @param {string} 18310746666 * @returns {string} 183****6666 前3后4，中间4星 */ mobileToStar(value) { if (!value) return null let reg = '', str = '' if (!isNaN(value)) value = value.toString() let len = value.length if (len === 4) { reg = /^([A-Za-z0-9]{1})([A-Za-z0-9]{2})([A-Za-z0-9]{1})$/ str = value.replace(reg, '$1**$3') } else if (len === 5) { reg = /^([A-Za-z0-9]{1})([A-Za-z0-9]{3})([A-Za-z0-9]{1})$/ str = value.replace(reg, '$1***$3') } else if (len > 5 && len < 21) { // 隐藏中间4位 var num = Math.floor(len / 2) - 2 str = value.substr(0, num) + '****' + value.substr(num + 4) } else if (len > 20) { str = value.substr(0, 6) + '****' + value.substr(len - 6) } return str } }, computed: { input() { return this.pasteResult.length === 6 ? this.pasteResult : ['', '', '', '', '', ''] } }, mounted() { document.getElementById('wrapper').style.display = 'block'; // 这里如果是从上一页过来可以使用 session 取出上一页传递过来的 phone // 可以从上一页发送验证码，也可以在此页面发送验证码 if (this.validMobile()) { const TIME_COUNT = 60 // 更改倒计时时间 if (!this.timer) { this.count = TIME_COUNT this.showTime = false this.timer = setInterval(() => { if (this.count > 1 && this.count <= TIME_COUNT) { this.count-- } else { this.showTime = true clearInterval(this.timer) // 清除定时器 this.timer = null } }, 1000) } } this.focus() this.$on('complete', this.handleComplete) }, methods: { sendCaptcha() { // 发送验证码 var phonePre = this.countryCode.replace(/^\+/, '') if (this.validMobile()) { this.handleClear() const TIME_COUNT = 60 // 更改倒计时时间 if (!this.timer) { this.count = TIME_COUNT this.showTime = false this.timer = setInterval(() => { if (this.count > 1 && this.count <= TIME_COUNT) { this.count-- } else { this.showTime = true clearInterval(this.timer) // 清除定时器 this.timer = null } }, 1000) } } }, handleComplete(value) { this.smsCode = value.join('') if (this.validCaptcha()) { showMessage('登录', 1800) } }, handleClear() { this.smsCode = '' this.clear() this.focus() }, // 验证手机号 validMobile(hasToast) { const reg = /^1[3-9][0-9]

评论收藏

内容反馈