快捷導(dǎo)航

angular實現(xiàn)form驗證實例代碼

更新時間：2017年01月17日 08:19:57 作者：沛東

本篇文章主要介紹了angular實現(xiàn)form驗證實例代碼，具有一定的參考價值，有興趣的可以了解一下。

先上效果頁面：

其中幾個知識點

1、angularJs提供了幾個新的type類型：

type="password"

type="email"

type="number"

type="url"

2、幾個參數(shù)含義

ng-required //是否必填，true/false

ng-minlength //最小長度，數(shù)字

ng-maxlength //最大長度，數(shù)字

min //最小數(shù)字，數(shù)字，僅在type="number"下

max //最小數(shù)字，數(shù)字，僅在type="number"

3、幾個form控制變量，先來一段代碼

<form role="form" name="myform" >
 <div class="form-group" >
 <label class="col-sm-2">用戶名</label>
 <div class="col-sm-8">
   <input type="text" name="username" class="form-control" placeholder="請輸入用戶名"></div>
 </div>
</form>

formName.inputFieldName.$pristine   //字段是否未更改,對應(yīng)上面的html代碼即為 myform.username.$pristine

formName.inputFieldName.$dirty   //字段是否更改,對應(yīng)上面的html代碼即為 myform.username.$dirty

formName.inputFieldName.$valid   //字段有效,對應(yīng)上面的html代碼即為 myform.username.$valid

formName.inputFieldName.$invalid   //字段無效,對應(yīng)上面的html代碼即為 myform.username.$invalid

formName.inputFieldName.$error   //字段錯誤信息，使用頻率比較高,對應(yīng)上面的html代碼即為 myform.username.$error

4、下面直接上代碼，首先是html代碼，使用了bootstrap.css樣式，在結(jié)尾引入了angular

<!DOCTYPE html>
<html>
<head>
 <title>form驗證</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body ng-app="formModule">
<div style="margin-top: 60px;">
 <form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl">
 <!-- 用戶名 -->
 <div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}">
 <label class="col-sm-2">用戶名</label>
 <div class="col-sm-8">
   <input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="請輸入用戶名"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用戶名必須大于5位</div>
 <div class="col-sm-2" ng-show="myform.username.$error.maxlength">用戶名必須小于于10位</div>
 </div>
<!-- 密碼 -->
<div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}">
 <label class="col-sm-2">密 碼</label>
 <div class="col-sm-8">
   <input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="請輸入密碼"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密碼必須大于10位</div>
 </div>

 <!-- 確認(rèn)密碼 -->
 <div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}">
 <label class="col-sm-2">確認(rèn)密碼</label>
 <div class="col-sm-8">
   <input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="請輸入確認(rèn)密碼"></div>
 <div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">兩次密碼不一致</div>
 </div>
 <!-- 郵箱 -->
 <div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}">
 <label class="col-sm-2">郵 箱</label>
 <div class="col-sm-8">
   <input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="請輸入郵箱地址"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">請輸入正確郵箱地址</div>
 </div>
 <!-- 博客 -->
 <div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}">
 <label class="col-sm-2">年 齡</label>
 <div class="col-sm-8">
   <input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="請輸入您的年齡"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">請輸入正確年齡</div>
 </div>
 <!-- 年齡 -->
 <div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}">
 <label class="col-sm-2">博 客</label>
 <div class="col-sm-8">
   <input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="請輸入博客地址"></div>
 <div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">請輸入正確博客地址</div>
 </div>
 <!-- 性別 -->
 <div class="form-group">
 <label class="col-sm-2">性 別</label>
 <div class="col-sm-8">
  <label class="radio-inline">
   <input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label>
 <label class="radio-inline">
   <input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label>
 </div>
 </div>
 <!-- 愛好 -->
 <div class="form-group">
 <label class="col-sm-2">愛 好</label>
 <div class="col-sm-8">
 <label ng-repeat="hoppy in hoppies" class="checkbox-inline">
  <input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}}
 </label>
 </div>
 <div class="col-sm-2">{{data.Ahoppy.join('、')}}</div>
 </div>

 <!-- 地址 -->
 <div class="form-group">
  <label class="col-sm-2">地 址</label>
  <div class="col-sm-3">
   <select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select>
  </div>
  <div class="col-sm-3">
   <select class="form-control" ng-show="data.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select>
  </div>
  <div class="col-sm-3">
   <select class="form-control" ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select>
  </div>
 </div>
 </form>
</div>

<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>

下面為js代碼（可能其中有些不妥之處，請指正，謝謝）

(function(window) {
 'use strict';
 var mymodule = angular.module('formModule', []);
 // 城市刪選器
 mymodule.filter('cityfilter',function(){
  return function(data,parent){
   var cityData=[];
   angular.forEach(data, function(item, key){
    if(item.parent==parent){
     cityData.push(item);
    }
   });
   return cityData;
  }
 });
 mymodule.controller('formctrl', ['$scope', function($scope) {
  // 設(shè)定初始狀態(tài)
  $scope.data={
   Ahoppy:[1,3]
  }
  // 愛好對象
  $scope.hoppies = [
  {id: 1,name: '玩游戲',checked: istrue(1)},
  {id: 2,name: '吃飯',checked: false}, 
  {id: 3,name: '睡覺',checked: false}, 
  {id: 4,name: '玩游戲',checked: true}
  ];
  // 城市
  $scope.cities=[
   {name:'河南',parent:0,id:1},
   {name:'鄭州',parent:1,id:2},
   {name:'鄭東新區(qū)',parent:2,id:3},
   {name:'金水區(qū)',parent:2,id:4},
   {name:'二七區(qū)',parent:2,id:5},
   {name:'信陽',parent:1,id:6},
   {name:'商城',parent:6,id:7},
   {name:'羅山',parent:6,id:8},
   {name:'杭州',parent:0,id:9},
   {name:'西湖區(qū)',parent:9,id:10},
   {name:'余杭區(qū)',parent:9,id:11},
   {name:'蕭山區(qū)',parent:9,id:12},
   {name:'上城區(qū)',parent:9,id:13},
  ];
  
  // 判斷是否是選中狀態(tài)
  function istrue(id){
   for(var i=0;i<$scope.data.Ahoppy.length;i++){
    if($scope.data.Ahoppy[i]===id){
     return true;
    }
   }
   return false;
  };
  // 獲取選中的愛好

  $scope.togglehoppy = function() {
   $scope.data.Ahoppy = [];
   angular.forEach($scope.hoppies, function(item, key) {
    if (item.checked == true) {
     $scope.data.Ahoppy.push(item.id);
    }
   });
  }

 }])
})(window)

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

您可能感興趣的文章: