验证码"/>
vue手写验证码
包括倒计时里面都有的
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta charset="UTF-8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><meta content="yes" name="apple-mobile-web-app-capable" /><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="format-detection" content="telephone=no" /><metahttp-equiv="Cache-Control"content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>查询申卡进度</title><link rel="stylesheet" href="../../css/main.css" /><link rel="stylesheet" href="../../css/vant.css" /><link rel="stylesheet" href="../../css/progress/index.css" /><script src="../../js/rem.js"></script></head><body><div id="app" v-cloak><div class="card-group"><inputtype="text"placeholder="姓名"maxlength="20"v-model="card_name"/></div><div class="card-group" @click="showPicker=true"><p>证件类型</p><p class="group"><span>{{certType.text}}</span><van-icon name="arrow" size="o.4rem" /></p></div><div class="card-group"><inputtype="text"@input="onInput"maxlength="18"placeholder="证件号码"v-model="card_no"/></div><div style="display: flex; background: #fff; height: 50px"><inputmaxlength="4"style="padding-left: 15px; width: 70%"v-model="msgCode"type="number"label=""onchange="value=value.replace(/[\D]/g,'')"placeholder="请输入验证码"/><p class="send" @click="getMsgCode" :class="{ disabled: msgCodes.time < 60 }">{{ msgCodes.msg }}</p></div><divclass="query-btn":class="{'active':card_name==''||card_no==''}"@click="query">立即查询</div><van-popup v-model="showPicker" round position="bottom"><van-pickertitle="证件选择"show-toolbar:columns="certList"@confirm="onConfirm"@cancel="onCancel"/></van-popup></div><script src="../../js/vconsole.min.js"></script><script src=".6.0.js"></script><script src="../../js/zepto.min.js"></script><script src="../../js/vue.min.js"></script><script src="../../js/vant.js"></script><script src="../../js/keyou-crypto-min.js"></script><script src="../../js/md5.js"></script><script src="../../js/sha1.js"></script><script src="../../js/jsrsasign-all-min.min.js"></script><script src="../../js/request_v_0.1.js"></script><script src="../../js/plugIn_v_0.1.js"></script><script>new Vue({el: "#app",data() {return {msgCode: "",showPicker: false,card_name: "",card_no: "",msgCodes: {msg: "发送验证码",time: 60,},certType: {text: "身份证",value: "00",},certList: [{text: "身份证",value: "00",},{text: "户口簿",value: "01",},{text: "护照",value: "03",},{text: "港澳通行证",value: "04",},{text: "台湾通行证",value: "05",},{text: "外国永久居住证",value: "06",},{text: "军官证",value: "07",},{text: "警官证",value: "08",},{text: "其他",value: "99",},],};},mounted() {},methods: {getMsgCode() {console.log("1");if (this.msgCodes.time > 59) {console.log("23");// http// .postRequest("frontEnd/M001", {// userId: user.userId,// ses_id: user.ses_id,// verifyNo: form.mobile,// handleType: "22",// verifyMode: "0",// })// .then((res) => {// if (res.result == "0") {// Toast("发送成功");this.msgCodes.time--;this.msgCodes.msg = `59s后重发`;let timer = setInterval(() => {let that=thisthat.msgCodes.time--;that.msgCodes.msg = `${that.msgCodes.time}s后重发`;if (that.msgCodes.time < 1) {clearInterval(timer);that.msgCodes.time = 60;that.msgCodes.msg = "重新发送";}}, 1000);// }// });}},onConfirm() {if (this.msgCode == "") {Toast("请输入验证码");return;}},onInput() {this.card_no = this.card_no.replace(/[^A-Za-z0-9]/g, "");},onCancel() {this.showPicker = false;},onConfirm(value) {this.certType.text = value.text;this.certType.value = value.value;this.showPicker = false;},query() {let _this = this;if (this.card_no == "" || this.card_name == "") {return false;}ajax("/interf/frontEnd/AC/AC08",{name: _this.card_name,cert_no: _this.card_no,cert_type: _this.certType.value,},true,"POST",function (data) {if (data.result == "0") {setLocalStore("queryData", JSON.stringify(data));window.location.href = "./progress.html";}});},},});</script><style>.send {margin-top: 15px;font-size: 13px;line-height: 18px;color: #2aa5fe;}.send .disabled {color: #999;}</style></body>
</html>更多推荐
vue手写验证码
发布评论