1. 程式人生 > >angularjs表單註冊--兩次密碼驗證

angularjs表單註冊--兩次密碼驗證

html

<div class="container" ng-controller="RegisterCtrl">
    <form name="loginForm" ng-submit="submitForm()">
        <div class="form-group" ng-class={'has-success':loginForm.username.$valid}>
            <lable>使用者名稱:</lable>
            <input type="text" name="username"
class="form-control" ng-model="userdata.username" ng-minlength="4" ng-maxlength="32" required>
<p class="error" ng-if="loginForm.username.$error.required &&loginForm.username.$touched">請輸入使用者名稱</p> <p class="error" ng-if="(loginForm.username.$error.minlength||loginForm.username.$error.maxlength)&&loginForm.username.$touched"
>
使用者名稱應在4到32位之間</p> </div> <div class="form-group" ng-class={'has-success':loginForm.password.$valid}> <lable>密碼:</lable> <input type="password" name="password" class="form-control" ng-model="userdata.password" ng-minlength="6"
ng-maxlength="64" required>
<p class="error" ng-if="loginForm.password.$error.required &&loginForm.password.$touched">請輸入密碼</p> <p class="error" ng-if="(loginForm.password.$error.minlength||loginForm.password.$error.maxlength)&&loginForm.password.$touched">密碼應在6到64位之間</p> </div> <div class="form-group" ng-class={'has-success':loginForm.password.$valid}> <lable>密碼:</lable> <input type="password" name="password2" class="form-control" ng-model="userdata.password2" compare="userdata.password" ng-minlength="6" ng-maxlength="64" required> <p class="error" ng-if="loginForm.password2.$error.required &&loginForm.password2.$touched">請輸入密碼</p> <p class="error" ng-if="(loginForm.password2.$error.minlength||loginForm.password2.$error.maxlength)&&loginForm.password2.$touched">密碼應在6到64位之間</p> <p class="error" ng-if="loginForm.password2.$error.compare &&loginForm.password2.$dirty">兩次密碼不一致</p> </div> <button class="btn btn-primary">註冊</button> </form> </div>

js
第一種寫法

.controller('RegisterCtrl', function($scope) { 
        $scope.userdata = {};
        $scope.submitForm = function() {
            console.log($scope.userdata);
            if ($scope.loginForm.$invalid) {
                alert('請檢查您的資訊')
            } else {
                alert('註冊成功!')
            }

        }
   })
   .directive('compare', function() {

        var o = {};
        o.strict = 'AE';
        o.scope = {
            orgText: '=compare'
        }
        o.require = 'ngModel';
        o.link = function(scope, elem, att, con) {
            con.$validators.compare = function(v) {
                return v == scope.orgText;
            }
            scope.$watch('orgText', function() {
                con.$validate();
            });
        }
        return o;
    });

第二種寫法

    .directive('compare',function(){
        return{ 
            strict:'AE',
            require:'ngModel',
            scope:{
                orgText:'=compare'
            },
            link:function(scope,elemt,attars,con){
                con.$validators.compare = function(v) {
                return v == scope.orgText;
            }
            scope.$watch('orgText', function() {
                con.$validate();
            });
            }
        }
    });

這裡寫圖片描述