欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)表單驗(yàn)證功能詳解

 更新時(shí)間：2017年10月12日 11:58:39   作者：chengzhang_jian  
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在ng中，針對(duì)表單和空間提供了屬性，用于驗(yàn)證控件交互的狀態(tài)

布爾類型：

ng-valid 表單通過驗(yàn)證時(shí)設(shè)置
ng-invalid 表單未通過驗(yàn)證時(shí)設(shè)置
ng-pristine 表單沒有改動(dòng)時(shí)設(shè)置
ng-dirty 表單有改動(dòng)時(shí)設(shè)置

對(duì)象：

$error

注意事項(xiàng)：

①給表單以及表單組件 加上name屬性
②給需要用到的表單組件 ，加上ngModel
③屬性的用法
myForm.t_age.dirty/pristine/valid/invalid/$error

案例如下

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl">
 <form name="myForm" ng-submit="submitInfo()">
 <input type="text" name="t_name"
   ng-model="userName" required/>
 <span ng-show="myForm.t_name.$error.required">
  姓名不能為空
 </span>
 <br/>
 <input type="text" name="t_age"
   ng-model="userAge" required/>
 <span ng-show="myForm.t_age.$invalid">驗(yàn)證失敗</span>
 <span ng-show="myForm.t_age.$pristine">沒有輸入過</span>

 <br/>
 <input
  ng-disabled="myForm.$invalid"
  type="submit" value="提交"/>
 </form>
</div>

<script>
 var app = angular.module('myApp', ['ng']);

 app.controller('myCtrl', function ($scope) {
 $scope.submitInfo = function () {
  console.log($scope.userName,$scope.userAge);
 }
 });
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論