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

angular實現表單驗證及提交功能

 更新時間:2017年02月01日 09:57:51   作者:Sophie_U  
這篇文章主要為大家詳細介紹了angular實現表單驗證及提交功能的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本例通過Angular框架來實現簡單的表單驗證

一、html結構

1、借助于bootstrap快速的編寫了一個簡單的表單
代碼主要部分如下: 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
  <h1 style="text-align: center">用戶表單提交</h1>
  <form action="upload.js" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="username" class="col-sm-3 control-label">用戶名</label>
      <div class="col-sm-9">
        <input type="text" autocomplete="false" name="username" placeholder="用戶名" ng-model="data.username" id="username" class="form-control" required>
        <div class="alert alert-danger help-block" >
          用戶名長度不能小于5位
        </div>
        <div class="alert alert-danger help-block" >
          用戶名長度不能大于15位
        </div>
      </div>
    </div>
  </form>
 </div>

2、表單驗證常見問題及指令

1)、問題:
》如何綁定數據——雙向綁定
》驗證表單——正則表達式
》顯示錯誤信息
》整個Form的驗證
》避免提交沒通過驗證的表單
》防止多次提交
2)、常用指令
》指令:
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》樣式:
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制變量
formName.inputFieldName.$error:字段錯誤信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始狀態(tài)
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否無效

二、功能實現

2.1 用戶名驗證
用戶輸入用戶名字段驗證主要是長度驗證,以及是否必須

1、ng-model綁定表單數據,以便使用angular的驗證api
2、ng-minlength,ng-maxlength規(guī)定字段長段,required規(guī)定字段必填
3、錯誤提示信息通過formName.inputFieldName.$error.minlength/maxlength決定是否要顯示,當輸入不合法時,$error對應的錯誤信息會為true
如下:

  <div class="form-group">
    <label for="username" class="col-sm-3 control-label">用戶名</label>
    <div class="col-sm-9">
      <input type="text" autocomplete="false" name="username" placeholder="用戶名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
        用戶名長度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
        用戶名長度不能大于15位
      </div>
    </div>
  </div>

2.2 密碼確認驗證

用戶密碼確認驗證需要保證兩次輸入的密碼一致,且在未輸入確認密碼前不驗證

1、綁定數據ng-model=data.pwdConfirm(所有表單數據都保存到data對象中)
2、通過判斷data.pwdConfirm!==data.password確定兩次密碼是否輸入一致
3、通過formName.inputField.$dirty確定此項是否填寫過

  <div class="form-group">
    <label class="col-sm-3 control-label">確認密碼</label>
    <div class="col-sm-9">
      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="確認密碼" id="pwdConfirm" required class="form-control">
      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
        兩次輸入的密碼不一致
      </div>
    </div>
  </div>

2.3 郵箱驗證

郵箱驗證主要驗證郵箱格式是否正確,字段長度

1、使用H5中新增type屬性值email作為
2、通過ng-pattern指令定義郵箱驗證的正則
3、郵箱驗證常用正則表達式:^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+
4、通過myForm.email.$error.pattern驗證郵箱格式是否正確

  <div class="form-group">
    <label class="col-sm-3 control-label">郵箱</label>
    <div class="col-sm-9">
      <input type="email" name="email" ng-model="data.email" placeholder="郵箱" class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
        郵箱長度不能小于5位
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
        請?zhí)顚懻_的郵箱格式
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
        郵箱長度不能大于30位
      </div>
    </div>
  </div>

2.4 單復選框

單復選框主要確定數據綁定問題,以及復選框的數據渲染
1、通過以data對象的屬性形式來綁定數據
2、多選的選項值通過ng-repeat進行遍歷
3、設置value值以便提交時對值進行區(qū)分

  <div class="form-group">
    <label class="col-sm-3 control-label">性別</label>
     <div class="col-sm-9">
       <label class="radio-inline">
         <input type="radio" name="sex" value="1" ng-model="data.sex" />男
       </label>
       <label class="radio-inline">
         <input type="radio" name="sex" value="0" ng-model="data.sex" />女
       </label>
     </div>
  </div>
   <div class="form-group">
    <label class="col-sm-3 control-label">愛好</label>
     <div class="col-sm-9">
       <label class="radio-inline" ng-repeat="hobby in hobbies">
         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" />&nbsp;{{hobby.name}}
       </label>
     </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置">
    <input type="submit" class="btn btn-primary " value="提交">
  </div>

2.5 城市二級聯動

1、城市數據定義:每個城市對象包括id,parent,name屬性,id為每個城市省份獨有,parent是根據父級省份或城市而定
2、通過ng-options指令來遍歷出城市數據

2.5.1 城市數據模型

通過\$scope.cities定義數據模型

   $scope.cities=[
    {
      id:1,
      parent:0,
      name:'四川省'
    },
    {
      id:2,
      parent:1,
      name:'成都市'
    },
    ...
  ]

2.5.2 html中渲染城市數據

通過ng-options指令和ng-model指令遍歷數據和設置默認值

  <div class="form-group">
    <label class="col-sm-3 control-label">出生地</label>
     <div class="col-sm-3">
       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
         <option value="">-- 請選擇 --</option>
       </select>
     </div>
  </div>

說明:
1、ng-options=”obj.name for obj in datas” 常見用法,通過 obj.id as obj.name設置option標簽的value值為id,內容為name
2、ng-model可用于設置select的默認值
2.5.3 定義過濾器用于過濾省份,城市等

.filter("cityFilter",function(){
  return function(input,parent){
    var filtedData=[];
    angular.forEach(input,function(value,key){
      if(value.parent===parent){
        filtedData.push(value)
      }
    })
    return filtedData;
  }
})

說明:
1、如上通過定義cityFilter,傳入一個parent作為參數,遍歷傳入的數據,并寬判斷是否與傳入的parent相等來確定當前城市是哪一級
2、返回的filtedData即是過濾結果。
3、用到了angular.forEach(obj,fn)迭代器,其中fn有三個參數傳入,分別是value,key,obj;value即為當前遍歷出的對象,key為遍歷的唯一標識,obj為被遍歷的數組或對象本身。
使用(省份): ng-options="c.id as c.name for c in cities|cityFilter:0"

2)、城市對應選擇
1、根據data.province作為過濾參數,進行城市篩選
2、區(qū)域的選擇同理,可設置當選擇了城市后,再出現區(qū)域選項框(ng-show指令)

  <div class="col-sm-2">
    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
      <option value="">-- 請選擇 --</option>
    </select>
  </div>
  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
      <option value="">-- 請選擇 --</option>
    </select>
  </div>

2.6 表單提交

1、功能需求:當表單驗證不通過時,使提交按鈕失效(ng-disabled),

html結構:

  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="重置" ng-click="reset()">
    <input type="submit" class="btn btn-primary " value="提交" ng-disabled="myForm.$invalid">
  </div>

js:

  $scope.reset=function(){
    $scope.myForm.$setPristine();
  }

注:表單中有一個$setPristine()方法將表單復位原始狀態(tài),class,$dirty,$pristine會恢復原始狀態(tài)。但注意表單的錯誤信息$error并不會被隱藏,所以在驗證表單時,記得在每一項錯誤信息都是由$dirty才判斷的。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Angular2監(jiān)聽頁面大小變化的解決方法

    Angular2監(jiān)聽頁面大小變化的解決方法

    這篇文章主要介紹了Angular2監(jiān)聽頁面大小變化的解決方法,需要的朋友可以參考下
    2017-10-10
  • 通過angular CDK實現頁面元素拖放的步驟詳解

    通過angular CDK實現頁面元素拖放的步驟詳解

    這篇文章主要給大家介紹了關于如何通過angular CDK實現頁面元素拖放的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者使用angular具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2020-07-07
  • Angular開發(fā)實踐之服務端渲染

    Angular開發(fā)實踐之服務端渲染

    這篇文章主要介紹了Angular開發(fā)實踐之服務端渲染,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • 使用angular幫你實現拖拽的示例

    使用angular幫你實現拖拽的示例

    下面小編就為大家?guī)硪黄褂胊ngular幫你實現拖拽的示例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Angular4學習教程之HTML屬性綁定的方法

    Angular4學習教程之HTML屬性綁定的方法

    這篇文章主要給大家介紹了關于Angular4學習教程之HTML屬性綁定的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2018-01-01
  • angular過濾器實現排序功能

    angular過濾器實現排序功能

    這篇文章主要為大家詳細介紹了angular過濾器實現排序功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • AngularJs實現ng1.3+表單驗證

    AngularJs實現ng1.3+表單驗證

    這篇文章主要介紹了AngularJs實現ng1.3+表單驗證,感興趣的小伙伴們可以參考一下
    2015-12-12
  • AngularJs驗證重復密碼的方法(兩種)

    AngularJs驗證重復密碼的方法(兩種)

    本文給大家介紹angularjs驗證重復密碼的兩種方法,每種方法都有各自的優(yōu)缺點,大家可以根據需要選擇一種方法,具體內容詳情大家通過本文詳細了解下吧
    2016-11-11
  • angularjs數組判斷是否含有某個元素的實例

    angularjs數組判斷是否含有某個元素的實例

    下面小編就為大家分享一篇angularjs數組判斷是否含有某個元素的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • AngularJS實現的生成隨機數與猜數字大小功能示例

    AngularJS實現的生成隨機數與猜數字大小功能示例

    這篇文章主要介紹了AngularJS實現的生成隨機數與猜數字大小功能,結合完整實例形式分析了AngularJS隨機數生成與數值判定相關操作技巧,需要的朋友可以參考下
    2017-12-12

最新評論