angularjs表单验证



用户注册


*请输入邮箱 *请输入正确的email地址


*请输入姓名


*密码长度不小于6
*密码长度不超过20


*两次密码输入不一致


angularjs表单验证,两次密码一致验证

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
<script>
    var app = angular.module('myApp', []);
    app.controller('registerCtrl'function($scope) {
 
    });
</script>
 
<div class="clearfix">
    <div class="col-sm-6 col-sm-offset-3" ng-app="myApp"
        ng-controller="registerCtrl">
        <h1>用户注册</h1>
        <form name="registerForm" novalidate>
            <div id="email-group">
                <label for="email">E-mail:</label> <input type="email"
                    class="form-control" ng-model="email" name="email" id="email"
                    placeholder="请输入电子邮箱..." required>
                <p>
                    <span style="color: red" ng-show=" registerForm.email.$invalid">
                        <span ng-show="registerForm.email.$error.required">*请输入邮箱</span> <span
                        ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
                    </span>
                </p>
            </div>
 
            <div id="name-group">
                <label for="name">昵称:</label> <input type="text"
                    class="form-control" ng-model="name" name="name" id="name"
                    placeholder="请输入昵称..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.name.$invalid">
                        <span ng-show="registerForm.name.$error.required">*请输入姓名</span>
                    </span>
                </p>
            </div>
 
            <div id="password-group">
                <label for="password">密码:</label> <input type="password"
                    class="form-control" ng-model="password" ng-minlength="6"
                    ng-maxlength="20" name="password" id="password"
                    placeholder="请输入密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$invalid">
                        <span ng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
                        <span ng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
                    </span>
                </p>
            </div>
 
            <div id="passwordagaingroup">
                <label for="passwordagain">再输入一遍密码:</label> <input type="password"
                    class="form-control" ng-model="passwordagain" name="passwordagain"
                    placeholder="请再输一遍密码..." required>
                <p>
                    <span style="color: red" ng-show="registerForm.password.$valid">
                        <span ng-show="passwordagain!=password">*两次密码输入不一致</span>
                    </span>
                </p>
            </div>
 
            <button type="submit" class="btn btn-success"
                ng-disabled="registerForm.email.$invalid || registerForm.name.$invalid || registerForm.password.$invalid || password != passwordagain">
                提交<span class="fa fa-arrow-right"></span>
            </button>
        </form>
    </div>
</div>
虚拟主机
《JavaScript设计模式与开发实践 》PDF
《HTML5从入门到精通》PDF
《你不知道的JavaScript(中卷)》PDF
《你不知道的Javascript(上卷)》PDF
广告也精彩