第一阶段

登录页面表单验证

规则设定

  • 用户名非空
  • 密码非空

任务拆解

  1. 用户名输入
  2. 密码输入
  3. 登录按钮

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <form id="loginForm" action="login_success.html">
            <label>用户名称：</label>
            <input v-model="username" type="text" class="itxt" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
            <br/>
            <br/>
            <label>用户密码：</label>
            <input v-model="password" type="text" class="itxt" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
            <br/>
            <br/>
            <button type="submit" id="sub_btn" @click="loginCheck">登录</button>
        </form>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        new Vue({
            "el":"#loginForm",
            "data":{
                "username":"",
                "password":""
            },
            "methods":{
                "loginCheck":function(){
                    if (this.username == "" || this.password == "")
                        event.preventDefault();
                }
            }
        });
    </script>
</html>

注册页面表单验证

规则设定

  • 用户名与密码必须满足要求
  • 密码至少为8位
  • 两次输入密码必须一致
  • 邮箱格式必须满足要求
  • 验证码必须满足要求

任务拆解

  1. 用户名输入
  2. 密码输入
  3. 确认密码
  4. 输入邮箱
  5. 显示验证码图片
  6. 输入验证码
  7. 注册按钮

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <form id="registerForm" action="regist_success.html">
            <div class="form-item">
                <div>
                    <label>用户名称：</label>
                    <input v-model="username" type="text" placeholder="请输入用户名" />
                    <span></span>
                </div>
                <span>{{usernameCheckMessage}}</span>
            </div>

            <div class="form-item">
                <div>
                    <label>用户密码：</label>
                    <input v-model="password" type="text" placeholder="请输入密码" />
                </div>
                <span class="errMess">密码的长度至少为8位</span>
            </div>

            <div>
                <div class="form-item">
                    <input v-model="passwordConfirm" type="text" placeholder="请再次输入密码" />
                </div>
                <span class="errMess">两次输入的密码不一致</span>
            </div>

            <div class="form-item">
                <div>
                    <label>用户邮箱：</label>
                    <input v-model="email" type="text" placeholder="请输入邮箱" />
                </div>
                <span class="errMess">请输入正确的邮箱格式</span>
            </div>

            <div class="form-item">
                <div>
                    <label>验证码：</label>
                    <div class="verify">
                        <input v-model="code" type="text" placeholder="" />
                        <img src="" alt="" />
                    </div>
                </div>
                <span class="errMess">请输入正确的验证码</span>
            </div>

            <button type="submit" @click="registerCheck" class="btn">注册</button>
        </form>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        new Vue({
            "el":"#registerForm",
            "data":{
                "username":"",
                "password":"",
                "passwordConfirm":"",
                "email":"",
                "code":"",
                "usernameCheckMessage":""
            },
            "watch":{
                "username":function(inputValue){
                    var usernameRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;

                    if (usernameRegExp.test(this.username)) {
                        this.usernameCheckMessage = "";
                    }
                    else {
                        this.usernameCheckMessage = "用户名不符合规则";
                    }
                }
            },
            "methods":{
                "registerCheck":function(){
                    //1.检查用户名
                    var usernameRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;
                    if (!usernameRegExp.test(this.username)) {
                        event.preventDefault();     //如果明明不符合规则则阻止表单提交
                        return;     //一个不符合就可以不用继续检查了
                    }

                    //2.检查密码
                    var passwordRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;
                    if (!passwordRegExp.test(this.password)) {
                        event.preventDefault();
                        return;
                    }

                    //3.检查两次输入密码是否一致
                    if (this.password != this.passwordConfirm) {
                        event.preventDefault();
                        return;
                    }

                    //4.检查电子邮件
                    var emailRegExp = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
                    if (!emailRegExp.test(this.email)) {
                        event.preventDefault();
                        return;
                    }

                    //5.检查验证码
                    var codeRegExp = /[A-Z,a-z,0-9]{5}/;
                    if (!codeRegExp.test(this.code)) {
                        event.preventDefault();
                        return;
                    }
                }
            }
        });
    </script>
</html>