slick-angular-validation/index.html at master · SteefTheBeef/slick-angular-validation · GitHub

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
<!doctype html>
<html ng-app="slickAngularValidationTestApp">
<head>
    <title>Slick angular validation</title>
    <style>
        body {
            margin-top: 25px;
            font-family: arial, sans-serif;
        }

        .container {
            width: 960px;
            margin: 0 auto;
        }

        input {
            border: 1px solid #ccc;
        }
        label {
            display: block;
        }

        .checkbox {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <form name="form" novalidate>
            <label for="required">Required (model:data.required, validate: required)</label>
            <input type="text" ng-model="data.required" name="required" validate="required" id="required" ng-model-options="{ updateOn: 'blur' }"/>

            <label for="">maxlength (ng-model="data.maxlength1", validate="maxlength:data.required")</label>
            <input type="text" ng-model="data.maxlength1" name="maxlength1" validate="maxlength:data.required"/>

            <label for="">maxlength:3</label>
            <input type="text" ng-model="data.maxlength2" name="num" validate="maxlength:3"/>

            <label for="">minlength (ng-model="data.maxlength1", validate="minlength:data.required")</label>
            <input type="text" ng-model="data.minlength1" name="minlength1" validate="minlength:data.required"/>

            <label for="">minlength:3</label>
            <input type="text" ng-model="data.minlength2" name="minlength2" validate="minlength:3"/>

            <label for="">required if</label>
            <input type="text" ng-model="data.gdfgdf" name="requiredif" validate="requiredif:data.required=data.maxlength1"/>

            <label class="checkbox" for="acc">Accepted</label>
            <input type="checkbox" ng-model="data.test" name="accepted" validate="accepted" id="acc"/>

        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
    <!-- inject:js -->
    <!-- endinject -->
</body>
</html>