Vue.js 验证码组件点击"看不清换一张"无反应解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js 验证码组件点击"看不清换一张"无反应解决方案</title>
<script src="vue.js"></script>
</head>
<body>
<table>
<tr>
<td rowspan="2">注册邮箱:</td>
<td><input></td>
</tr>
<tr>
<td>你还可以手机注册</td>
</tr>
<tr>
<td>创建密码:</td>
<td><input></td>
</tr>
<tr>
<td>真实姓名:</td>
<td><input></td>
</tr>
<tr valign="right">
<td>性别:</td>
<td><input type="radio">男<input type="radio">女</td>
</tr>
<tr>
<td>生日:</td>
<td>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>年
<select>
<option>o1</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
<select>
<option>o1</option>
<option>02</option>
<option>05</option>
<option>16</option>
<option>18</option>
<option>19</option>
<option>24</option>
</select>日
</td>
</tr>
<tr>
<td>我正在:</td>
<td>
<select>
<option>写作业</option>
<option>听歌</option>
<option>喝水</option>
<option>想家</option>
<option>想吃饭</option>
<option>想睡觉</option>
</select>
</td>
</tr>
<tr id="app">
<td rowspan="3">验证码:</td>
<td><img src="imgSrc">
<span v-on:click="changeImage">看不清换一张</span>
</td>
</tr>
<tr>
<td><input id="inputVerifyCode"></td>
</tr>
<tr>
<td><img src="btn_reg.gif" v-on:click="checkVerifyCode"></td>
</tr>
</table>
<script>
new Vue({
el: "#app",
data: {
imgSrc: 'verycode.gif',
selectIndex: -1,
inputVerifyCode: ''
},
methods: {
changeImage: function () {
var imgUrlList = ["img/1111.png", "img/1234.png", "img/2222.png", "img/3333.png", "img/4567.png"];
var randomIndex = Math.floor(Math.random() * this.imgUrlList.length);
while(randomIndex == this.selectIndex){
randomIndex = Math.floor(Math.random() * this.imgUrlList.length);
}
this.selectIndex = randomIndex;
this.imgSrc = this.imgUrlList[randomIndex];
},
checkVerifyCode: function () {
if (this.selectIndex == -1) {
// 代表没有改过
if (this.inputVerifyCode == "bnksu") {
alert("输入正确")
} else {
alert("输入错误");
}
} else if (this.inputVerifyCode == rightCode[this.selectIndex]) {
alert("输入正确")
} else {
alert("输入错误");
}
}
}
})
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qfGK 著作权归作者所有。请勿转载和采集!