[AngularJS] AngularJS系列(3) 中级篇之表单验证

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<form name="form" novalidate ng-app>

    <span>{{form.$invalid}}</span>

    <span>{{form.$valid}}</span>

    <span>{{form.$dirty}}</span>

    <span>{{form.$pristine}}</span>

    <input type="text" ng-model="user" required />

    <input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />

    <input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />

    <input type="email" ng-model="email" required />

    <input type="url" ng-model="url" required />

    <input type="number" ng-model="number" required />

    <div>

        <button type="reset" ng-disabled="form.$pristine">重置</button>

        <button type="submit" ng-disabled="form.$invalid">提交</button>

    </div>

</form>

2

3

4

5

6

7

8

9

10

11

12

13

<form name="form" ng-app novalidate>

    <span>{{form.user.$error.required?‘user该项必填‘:‘‘}}</span>

    <input type="text" ng-model="user" name="user" required />

    <span>{{form.pwd.$error.required?‘pwd该项必填‘:‘‘}}</span>

    <input type="text" ng-model="pwd" name="pwd" required />

    <span>{{form.info.$error.required?‘info该项必填‘:‘‘}}</span>

    <input type="text" ng-model="info" name="info" required />

    <span>{{form.age.$error.required?‘age该项必填‘:‘‘}}</span>

    <input type="text" ng-model="age" name="age" required />

    <div>

        <button type="submit" ng-disabled="form.$invalid">提交</button>

    </div>

</form>

2

3

4

5

6

7

8

9

10

11

12

13

<form name="form" ng-app="myApp" novalidate>

    <input type="email" ng-model="user" name="username" required minlength="4" />

    <div ng-messages="form.username.$error" ng-messages-multiple>

        <div ng-message="required">该项必填</div>

        <div ng-message="minlength">低于最低长度</div>

        <div ng-message="email">应为email</div>

    </div>

</form>

<script src="Scripts/angular.min.js"></script>

<script src="Scripts/angular-messages.min.js"></script>

<script>

    angular.module(‘myApp‘, [‘ngMessages‘]);

</script>

2

3

4

5

6

7

8

9

<form name="form" ng-app="myApp" novalidate>

    <input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />

    <div ng-messages="form.username.$error" ng-messages-multiple>

        <div ng-message="required">该项必填</div>

        <div ng-message="minlength">低于最低长度</div>

        <div ng-message="email">应为email</div>

        <div ng-message="unique">用户名已存在</div>

    </div>

</form>

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

angular.module(‘myApp‘, [‘ngMessages‘]).directive(‘ensureUnique‘, [‘$http‘, ‘$timeout‘, ‘$window‘, function ($http, $timeout, $window) {

            return {

                restrict: "A",

                require: ‘ngModel‘,

                link: function (scope, ele, attrs, ngModelController) {

                    scope.$watch(attrs.ngModel, function (n) {

                        if (!n) return;

                        $timeout.cancel($window.timer);

                        $window.timer = $timeout(function () {

                            $http({

                                method: ‘get‘,

                                url: ‘/api/checkusername/‘, //根据换成自己的url

                                params: {

                                    "username": n

                                }

                            }).success(function (data) {

                                ngModelController.$setValidity(‘unique‘, data.isUnique); //这个取决于你返回的，其实就是返回一个是否正确的字段，具体的这块可以自己修改根据自己的项目

                            }).error(function (data) {

                                ngModelController.$setValidity(‘unique‘, false);

                            });

                        }, 500);

                    });

                }

            };

        }]);