真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用AngularJS怎么實(shí)現(xiàn)自定義表單驗(yàn)證功能

這篇文章給大家介紹使用AngularJS怎么實(shí)現(xiàn)自定義表單驗(yàn)證功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在新疆等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需規(guī)劃網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都全網(wǎng)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站制作,新疆網(wǎng)站建設(shè)費(fèi)用合理。

Angular實(shí)現(xiàn)了大部分常用的HTML5的表單控件的類(lèi)型(text, number, url, email, date, radio, checkbox)，也實(shí)現(xiàn)了很多指令做為驗(yàn)證(required, pattern, minlength, maxlength, min, max)。

在自定義的指令中，我們可以添加我們的驗(yàn)證方法到ngModelController的$validators對(duì)象上。為了取得這個(gè)controller對(duì)象，我們需要requirengModel指令。

在$validators對(duì)象上的每個(gè)方法都接收modelValue和viewValue兩個(gè)值做為參數(shù)。在你綁定的驗(yàn)證方法返回一個(gè)值(true,false)之后，Angular會(huì)在內(nèi)部調(diào)用$setValidity方法。驗(yàn)證會(huì)在每一次輸入框的值改變($setViewValue被調(diào)用)或者模型的值改變。驗(yàn)證發(fā)生在$parsers和$formatters成功運(yùn)行之后，驗(yàn)證不通過(guò)的項(xiàng)會(huì)做為ngModelController.$error的屬性存儲(chǔ)起來(lái)。

另外，在這個(gè)controller對(duì)象上，還有一個(gè)$asyncValidators對(duì)象，如果你的驗(yàn)證是異步的，則需要加驗(yàn)證附加在這個(gè)對(duì)象上，比如說(shuō)用戶注冊(cè)時(shí)輸入手機(jī)號(hào)，我們需要在后端驗(yàn)證該手機(jī)號(hào)是否已經(jīng)注冊(cè)，這個(gè)驗(yàn)證方法必須return一個(gè)promise對(duì)象，然后在驗(yàn)證通過(guò)時(shí)調(diào)用延遲對(duì)象的resolve，失敗時(shí)調(diào)用reject，還未完成的異步的驗(yàn)證存儲(chǔ)在ngModelController.$pending中。

例如(注意其中的user對(duì)象，只有驗(yàn)證通過(guò)了，才會(huì)將值綁定到模型上):


    
        
            手機(jī)號(hào)(不能重復(fù)):
        
        
    
                          用戶名(必須大于五位):                       
    提交

用戶對(duì)象

    {{ user | json }}

'use strict';
angular.module('app', [])
.directive('phone', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
        var d = $q.defer();
        $http.get('phone.json')
        .success(function (phoneList) {
          if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
            d.reject();
          } else {
            d.resolve();
          }
        });
        return d.promise;
      }
    }
  }
})
.directive('username', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$validators.username = function (modelValue, viewValue) {
        if (modelValue) {
          return modelValue.length > 5 ? true : false;
        };
        return false;
      }
    }
  }
})

phone.json

[
  13758262732,
  15658898520,
  13628389818,
  18976176895,
  13518077986
]

效果

使用AngularJS怎么實(shí)現(xiàn)自定義表單驗(yàn)證功能

下面一個(gè)完整的用戶注冊(cè)的表單驗(yàn)證:

html:


    
        用戶名:
        
        
        
    
             請(qǐng)注意！         用戶名不能帶#號(hào)。                   請(qǐng)注意！         用戶名不能為空。                   密碼:                                              請(qǐng)注意！         密碼長(zhǎng)度不能少于八位。                   請(qǐng)注意！         密碼不能為空。                   確認(rèn)密碼:                                     請(qǐng)注意！         兩次輸入的密碼不相同。                   請(qǐng)注意！         請(qǐng)?jiān)俅屋斎朊艽a。                   手機(jī)號(hào):                                                                                  發(fā)送驗(yàn)證碼                                                  請(qǐng)注意！         該手機(jī)號(hào)已注冊(cè)過(guò)，可直接登錄。                   請(qǐng)注意！         請(qǐng)輸入正確的手機(jī)號(hào)。                   驗(yàn)證碼:                                 提交

js:

'use strict';
angular.module('app', [])
.controller('myCtrl', function ($scope) {
  $scope.data = {};
  $scope.save = function () {
    alert('保存成功！')
  }
})
// 判斷手機(jī)號(hào)是否重復(fù)
.directive('phone', function ($q, $http) {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$asyncValidators.phone = function (modelValue, viewValue) {
        var d = $q.defer();
        $http.get('phone.json')
        .success(function (phoneList) {
          if (phoneList.indexOf(parseInt(modelValue)) >= 0) {
            d.reject();
          } else {
            d.resolve();
          }
        });
        return d.promise;
      }
    }
  }
})
// 驗(yàn)證兩次輸入的密碼是否相同的自定義驗(yàn)證
.directive('pwdRepeat', function () {
  return {
    require: 'ngModel',
    link: function (scope, ele, attrs, ctrl) {
      ctrl.$validators.pwdRepeat = function (modelValue) {
        // 當(dāng)值為空時(shí)，通過(guò)驗(yàn)證，因?yàn)橛衦equired
        if (ctrl.$isEmpty(modelValue)) {
          return true;
        }
        return modelValue === scope.data._password ? true : false;
      }
    }
  }
})

css:

.form-group {
  position: relative;
}
.right {
  position: absolute;
  right: 10px;
  top: 34px;
  color: green;
}

phone.json:

[
  13758262732,
  15658898520,
  13628389818,
  18976176895,
  13518077986
]

關(guān)于使用AngularJS怎么實(shí)現(xiàn)自定義表單驗(yàn)證功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。


網(wǎng)頁(yè)名稱：使用AngularJS怎么實(shí)現(xiàn)自定義表單驗(yàn)證功能
分享鏈接：http://weahome.cn/article/psohdp.html

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部