Shulou(Shulou.com)06/02 Report--

This article mainly introduces "vue how to achieve mobile CAPTCHA login". In daily operation, I believe many people have doubts about how to achieve mobile CAPTCHA login in vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve mobile CAPTCHA login in vue". Next, please follow the editor to study!

Verification code

{{codeBtnWord}} login

The vue verification tool class used

Export default {/ / limit only digits (you can enter two decimal places) limitInputPointNumber (val) {if (val = 0 | | val = "0" | | val = = "| val = = undefined) {return";} else {let value = null; value = val.replace (/ [^\ d.] / g, "); / / clear" number "and". " Characters other than value = value.replace (/\. {2,} / g, "."); / / keep only the first one. Clear the redundant value = value.replace (".", "$# $"). Replace (/\. / g, "). Replace (" $# $",". "); value = value.replace (/ ^ (-) * (\ d +)\. (\ d\ d). * $/," $1 $2.Secret3 "); / / enter only two decimal return value }, handleRouteToArray (route) {const matchs = route.path.split ('/') matchs.shift () let newMatch = [] matchs.map ((item) I) = > {if (matchs [I-1]) {item = newMatch [I-1] +'/'+ item} newMatch.push (item)}) newMatch = newMatch.map (item = > {return `/ ${item}`}) return newMatch}, / / password length is more than 8 digits Must contain any three types of testPassWord in uppercase, lowercase, numeric and special symbols: function (str) {var rC = {lW:'[a murz]', uW:'[Amurz]', nW:'[0-9]', sW:'[\\ u0020 -\ u002F\\ u003A -\ u0040\ u005B -\ u0060\ u007B-\ u007B -\ u007E]'} function Reg RStr) {var reg = new RegExp (rStr) if (reg.test (str)) return true else return false} if (str.length)

< 8) { return false } else { var tR = { l: Reg(str, rC.lW), u: Reg(str, rC.uW), n: Reg(str, rC.nW), s: Reg(str, rC.sW) } if ((tR.l && tR.u && tR.n) || (tR.l && tR.u && tR.s) || (tR.s && tR.u && tR.n) || (tR.s && tR.l && tR.n)) { // document.title = "密码符合要求" return true } else { return false } } }, // 密码验证8-30位任意字符 pwdReg: /^([0-9a-zA-Z]|(?:&)|(?:~)|(?:!)|(?:@)|(?:#)|(?:\$)|(?:%)|(?:\^)|(?:\*)){8,30}$/, // 电话号码验证 phoneReg: /^1[3|4|5|6|7|8][0-9]{9}$/, // 格式化金钱 formatUSD (val, currency) { if (val === '' || val === '--' || val === undefined) { return '--' } // 先判断数据是否有小数点 let newVal = String(Number(val).toFixed(2)) // 将科学计数转为正常的字符串显示 if (newVal.includes('e+')) { newVal = Number(newVal).toLocaleString() newVal = this.unFormatAmount(newVal) } let dotIdx = newVal.lastIndexOf('.') let dotVal = '.00' // 保留小数点后面的数据 if (dotIdx >

= 0) {dotVal = newVal.substr (dotIdx, newVal.length) newVal = newVal.slice (0, dotIdx)} let len = newVal.length let arr = [] let lastIndex = null while (len > 0) {lastIndex = len len-= 3 arr.unshift (len, lastIndex)} val = arr.join (' ') if (currency) {newVal = `${currency} ${val} ${dotVal}`} else {/ / newVal = `${val} ${dotVal} `newVal =` ¥${val} ${dotVal} `/ default RMB} return newVal}, / / format the amount number Input integers formatAmount (val) {if (val =''| | val ='-'| | val = undefined) {return'- -'} if (val = 0 | val ='0') {return 0} / / determine whether the data has a decimal point let newVal = String (val) let dotIdx = newVal.lastIndexOf ('.') Let dotLength = 0 if (newVal.split ('.'). Length > 1) {dotLength = newVal.split ('.') [1] .length} let dotVal ='/ / keep the data after the decimal point if (dotIdx > = 0) {newVal = String (Number (val). ToFixed (5) dotVal = newVal.substr (dotIdx, dotLength + 1) newVal = newVal.slice (0) DotIdx)} let len = newVal.length let arr = [] let lastIndex = null while (len > 0) {lastIndex = len len-= 3 arr.unshift (newVal.substring (len, lastIndex))} val = arr.join (',') if (dotVal.length

< 2) { dotVal = '' } return val + dotVal }, // 判断数据是否为空 isEmptyVal (val) { if (val === undefined || val === '') { return '--' } else { return val } }, // 格式化年月日 type: 中国显示方式(ch)及拼接的方式 // 注: 只有在接口传参时才需要中国的显示方式,其它为美式 formatYMD (now, type='ch') { if (!now || now === 'null' || now === '--' || now === undefined) { return '--' } if (Number(now)) { now = new Date(now) } // 兼容IE浏览器 ， YY-MM-DD 格式 if (typeof now === 'string' && now.includes('-')) { now = this.NewDate(now) } if (now) { let year = '' let month = '' let date = '' // 这里的8位用于返回如 20180423 这样的格式 if (String(now).length === 8 && String(now).indexOf('-') === -1 && String(now).indexOf('/') === -1) { const getNow = String(now) return `${getNow.substring(4, 6)}/${getNow.substring(6, 8)}/${getNow.substring(0, 4)}` } else { now = new Date(now) year = now.getFullYear() month = now.getMonth() + 1 date = now.getDate() } if (month < 10) { month = `0${month}` } if (date < 10) { date = `0${date}` } if (type === 'ch') { return `${year}-${month}-${date}` } else if (type) { return `${year}${type}${month}${type}${date}` } else { return `${month}/${date}/${year}` } } else { return '' } }, // 格式化时间 年，月，日，时，分，秒 formatDate (now, type) { if (!now || now === 'null' || now === '--' || now === undefined) { return '--' } if (now) { now = new Date(now) let year = now.getFullYear() let month = now.getMonth() + 1 let date = now.getDate() let hour = now.getHours() let minute = now.getMinutes() let second = now.getSeconds() if (month < 10) { month = `0${month}` } if (date < 10) { date = `0${date}` } if (hour < 10) { hour = `0${hour}` } if (minute < 10) { minute = `0${minute}` } if (second < 10) { second = `0${second}` } if (type) { return `${month}/${date}/${year} ${hour}:${minute}:${second}` } else { return `${month}-${date}-${year}` } } else { return '' } },} 直接放上完整的这样有助于看 {{ codeBtnWord }} 登录 //导入工具类import Verify from "@/components/Verify";import event from "../utils/event"import common from "@/utils/common";let params;export default { name: "LoginIphone", components: {Verify}, data() { //使用正则表达式验证手机号 const checkPhone = (rule, value, callback) =>

{if (! value) {return callback (new Error ('phone number cannot be empty');} else {/ / get the regular expression const reg = common.phoneReg / / console.log (reg.test (value)); if (reg.test (value)) {callback () } else {/ / clear this.ruleForm.phone =''return callback (new Error (' Please enter the correct mobile phone number') if you verify the input error;} Return {ruleForm: {phone:', code:',}, codeBtnWord: 'get CAPTCHA', / / get CAPTCHA button text / / waitTime: 61, / / get CAPTCHA button expiration time waitTime: 2 / / get the expiration time of the verification code button / / verify rules: {phone: [{validator: checkPhone, trigger: 'blur'}], code: [{required: true, message:' enter the verification password', trigger: 'blur'}]}} } / / calculation attribute computed computed: {/ / controls whether the get CAPTCHA button can be clicked on getCodeBtnDisable: {/ / set button 61s / / get () {/ / if (this.waitTime = 61) {/ / if (this.ruleForm.phone) {/ / return false /} / / return true / /} / / return true / /} get () {if (this.waitTime = 2) {if (this.ruleForm.phone) {return false} return true} return true} / / Note: because the calculated property itself does not have a set method Changes in methods are not supported, and I'm going to do this next So you need to manually add set () {}},}, methods: {getCode () {const _ this = this params = {} params.phone = this.ruleForm.phone / / call API _ this.$axios.post ('/ sendMessage') to obtain SMS verification code Params) .then (res = > {console.log ("- check the value of the response in the background -", res) / / store all the data in const mydata = res.data.data console.log ("I'm good at the SMS interface-- >" Mydata) / / Save CAPTCHA params.yz = mydata.vCode console.log ("I check CAPTCHA -" + mydata.vCode) console.log ("I check the number of calls -" + mydata.count) if (res.data.code = 200) {this.$message ({message: 'CAPTCHA has been sent Please wait.', type: 'success', center: true})} if (res.data.data.count > = 5) {/ / invoke the slider-verified component event.$emit ("VERIFY")}}) / / because the timer is used below You need to save this and point to let that = this that.waitTime-- that.getCodeBtnDisable = true this.codeBtnWord = `${this.waitTime} s and then get `let timer = setInterval (function () {if (that.waitTime > 1) {that.waitTime-- that.codeBtnWord =` ${that.waitTime} s and then get `} else {clearInterval ( Timer) that.codeBtnWord = 'get CAPTCHA' that.getCodeBtnDisable = false / / that.waitTime = 61 that.waitTime = 2}} 1000)}, submitForm (formName) {const _ this = this / / to determine whether the entered verification code is empty if (this.ruleForm.code! = null) {this.$ refs [formName] .validate ((valid) = > {if (valid) {_ this.$axios.post ("/ iosLogin", {"phone": this.ruleForm.phone) "Verification": this.ruleForm.code}) .then (res = > {console.log (res.data)}) / / console.log ("I submitted inside:", par) / const jwt = par.headers ['authorization'] / / console.log ("I am token- >" Jwt) / / const userInfo = par.data.data / / console.log ("View user information =", userInfo) / / share the data / / _ this.$store.commit ("SET_TOKEN", jwt) / / _ this.$store.commit ("SET_USERINFO") UserInfo) / / get / / console.log ("I am the acquired _ this.$store.getters.getUser") / / console.log (_ this.$store.getters.getUser) / / _ this.$router.push ("/ blogs")} else {console.log ('error submittance requests') Return false;}});} else {this.$message ({showClose: true, message: 'please enter an error', type: 'error'});} .el-button.disabled-style {background-color: # EEEEEE; color: # CCCCCC;} .demo-ruleForm {max-width: 500px Margin: 0 auto;} at this point, the study on "how to achieve mobile CAPTCHA login with vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.