验证码
<div id="verifyCode">
<div class="inputCode">
<span>验证码</span>
<input type="text" class="verifyBox" placeholder="请输入验证码" maxlength="4" value="{securityCode}" v-model="securityCode">
<div class="gain" v-show="showGain" @click="clickGain">获取验证码</div>
<div class="gain " v-show="showTime">{{time}}s</div>
<div class="gain " v-show="showRegain" @click="clickRegain">重新获取</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
const defatultTime = 60;
var wap = new Vue({
el: "#verifyCode",
data: {
securityCode: "",
time: defatultTime,
showGain: true,
showTime: false,
showRegain: false,
},
methods: {
clickGain(){
this.showGain = false;
this.showTime = true;
this.setTime();
},
setTime(){
var that = this;
if (that.time <= 0) {
that.gain = false;
that.showTime = false;
that.showRegain = true;
that.time = defatultTime;
clearTimeout(temTime);
return false;
} else {
temTime = setTimeout(function() {
that.time = --that.time;
console.log("time:" + that.time);
that.setTime();
}, 1000)
}
},
clickRegain() {
this.showTime = true;
this.showRegain = false;
this.setTime();
}
}
})
</script>
两次密码是否一致
<div class="inputCode">
<span>设置密码</span>
<input type="password" placeholder="请输入六位数字密码" maxlength="6" value="{pSix}" v-model="pSix">
</div>
<div class="inputCode">
<span>确认密码</span>
<input type="password" placeholder="请再次输入密码" maxlength="6" value="{comfirmPassw}" v-model="comfirmPassw">
</div>
<div class="submit" @click="comfirm()">确认</div>
<script type="text/javascript">
var wap = new Vue({
el: "#register",
data: {
pSix:"",
comfirmPassw:""
},
computed:{
comfirm(){
if(this.pSix !== this.comfirmPassw){
alert('密码不一致!')
}else{
alert('已绑定支付宝账号将为您跳转至体现页面')
}
}
}
})
</script>