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 valign="top">
        <td rowspan="2">注册邮箱:</td>
        <td><input></td>
    </tr>
<pre><code>&lt;tr&gt;
    &lt;td&gt;你还可以手机注册&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;创建密码:&lt;/td&gt;
    &lt;td&gt;&lt;input&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;真实姓名:&lt;/td&gt;
    &lt;td&gt;&lt;input&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr valign=&quot;right&quot;&gt;
    &lt;td&gt;性别:&lt;/td&gt;
    &lt;td&gt;&lt;input type=&quot;radio&quot;&gt;男&lt;input type=&quot;radio&quot;&gt;女&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;生日:&lt;/td&gt;
    &lt;td&gt;
        &lt;select&gt;
            &lt;option&gt;2000&lt;/option&gt;
            &lt;option&gt;2001&lt;/option&gt;
            &lt;option&gt;2002&lt;/option&gt;
            &lt;option&gt;2003&lt;/option&gt;
            &lt;option&gt;2004&lt;/option&gt;
        &lt;/select&gt;年
        &lt;select&gt;
            &lt;option&gt;o1&lt;/option&gt;
            &lt;option&gt;02&lt;/option&gt;
            &lt;option&gt;03&lt;/option&gt;
            &lt;option&gt;04&lt;/option&gt;
            &lt;option&gt;05&lt;/option&gt;
            &lt;option&gt;06&lt;/option&gt;
            &lt;option&gt;07&lt;/option&gt;
            &lt;option&gt;08&lt;/option&gt;
            &lt;option&gt;09&lt;/option&gt;
            &lt;option&gt;10&lt;/option&gt;
            &lt;option&gt;11&lt;/option&gt;
            &lt;option&gt;12&lt;/option&gt;
        &lt;/select&gt;月
        &lt;select&gt;
            &lt;option&gt;o1&lt;/option&gt;
            &lt;option&gt;02&lt;/option&gt;
            &lt;option&gt;05&lt;/option&gt;
            &lt;option&gt;16&lt;/option&gt;
            &lt;option&gt;18&lt;/option&gt;
            &lt;option&gt;19&lt;/option&gt;
            &lt;option&gt;24&lt;/option&gt;
        &lt;/select&gt;日
    &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;我正在:&lt;/td&gt;
    &lt;td&gt;
        &lt;select&gt;
            &lt;option&gt;写作业&lt;/option&gt;
            &lt;option&gt;听歌&lt;/option&gt;
            &lt;option&gt;喝水&lt;/option&gt;
            &lt;option&gt;想家&lt;/option&gt;
            &lt;option&gt;想吃饭&lt;/option&gt;
            &lt;option&gt;想睡觉&lt;/option&gt;
        &lt;/select&gt;
    &lt;/td&gt;
&lt;/tr&gt;

&lt;tr id=&quot;app&quot;&gt;
    &lt;td rowspan=&quot;3&quot;&gt;验证码:&lt;/td&gt;
    &lt;td&gt;&lt;img :src=&quot;imgSrc&quot;&gt;
        &lt;span v-on:click=&quot;changeImage&quot;&gt;看不清换一张&lt;/span&gt;
    &lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;&lt;input id=&quot;inputVerifyCode&quot; v-model=&quot;inputVerifyCode&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
    &lt;td&gt;&lt;img src=&quot;btn_reg.gif&quot; v-on:click=&quot;checkVerifyCode&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>
</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() * imgUrlList.length);
                while (randomIndex == this.selectIndex) {
                    randomIndex = Math.floor(Math.random() * imgUrlList.length);
                }
                this.selectIndex = randomIndex;
                this.imgSrc = imgUrlList[randomIndex];
            },
            checkVerifyCode: function () {
                var rightCode = [
                    "code1",
                    "code2",
                    "code3",
                    "code4",
                    "code5"
                ];
                if (this.selectIndex == -1) {
                    // 代表没有改过
                    if (this.inputVerifyCode == "bnksu") {
                        alert("输入正确")
                    } else {
                        alert("输入错误");
                    }
                } else if (this.inputVerifyCode == rightCode[this.selectIndex]) {
                    alert("输入正确")
                } else {
                    alert("输入错误");
                }
            }
        }
    })
</script>
</body>
</html>