Angular.js實現注冊系統(tǒng)的實例詳解

更新時間：2016年12月18日 11:40:30 作者：AnJikx

Angular.js是Google開發(fā)的前端技術框架，最近一直在學習Angular.js，通過對angular.js的簡單理解后發(fā)現，angular.js通過一些簡單的指令即可實現對DOM元素的操作，其特色為雙向數據綁定，下面這篇文章給大家詳細介紹Angular.js實現注冊系統(tǒng)的方法，一起來看看吧。

前言

相信大家在做項目里經常需要登錄注冊，那么在用angularjs該如何實現。下面讓我們通過angualr.js來實現注冊系統(tǒng)表單驗證。

Angular下載地址：https://code.angularjs.org/1.5.0/angular.js

首先看一下頁面效果（通過bootstrap實現的布局樣式）：

當我們點擊提交按鈕時，會根據表單驗證，若通過，則沒有提示語句，若不通過，則會彈出響應提示語句，當然該功能可以通過其他簡單方式實現，這里只是通過實戰(zhàn)對angular進一步深入理解。

實現方法如下：

頁面布局代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">　　　　//設置按照edge瀏覽器渲染方式渲染
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> //設置頁面寬度，縮放比例，用戶不能縮放
 <title>注冊</title>
 <link rel="stylesheet" href="bootstrap.min.css">
 <style>
  input {
   outline: none; //去掉chrome瀏覽器輸入框內的藍色邊框
  }
 </style>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtr">
  <div class="container">
   <h2 class="text-center">注冊系統(tǒng)</h2>
   <div class="row">
    <form name="myForm" class="form-horizontal">
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="username">用戶名：</lable>
      </div>
      <div class="col-xs-8">
       <input id="username" type="text" ng-model="data.username" name="username" ng-required="true"> //ng-required="true"是設置輸入框內必須填寫內容，下同
      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="tel">電話：</lable>
      </div>
      <div class="col-xs-8">
       <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1\d{10}$/" ng-required="true"> //ng-pattren="/XXX/"是設置正則驗證，下同
       
      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="address">地址：</lable>
      </div>
      <div class="col-xs-8">
       <input id="address" type="text" ng-model="data.address" name="address" ng-required="true">
      
      </div>
     </div>
     <div class="form-group">
      <div class="col-xs-3 col-xs-offset-1">
       <lable for="email">郵箱：</lable>
      </div>
      <div class="col-xs-8">
       <input id="email" type="text" ng-model="data.email" name="email" ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/" ng-required="true">
      </div>
     </div>
     <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">
      <p ng-show="myForm.username.$invalid && myForm.username.$dirty">請?zhí)顚懹脩裘?lt;/p>
      <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請?zhí)顚懻_電話</p>
      <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請?zhí)顚懙刂?lt;/p>
      <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請?zhí)顚懻_郵箱</p>
      <p ng-show="showAllErr">請?zhí)顚?lt;/p>
     </div>
     <div class="form-group">
      <div class="col-xs-12">
       <input class="btn btn-success" type="submit" style="width:100%" ng-click="check()">
      </div>
     </div>
    </form>
   </div>
  </div>
  
 </div>
<script src="angular.min.js"></script>
</body>
</html>

如上頁面布局代碼，記得引入bootstrap.css;angular.js，ng-required;ng-pattern 功能等同于H5新屬性：required; pattern, 另外還有disabled；readonly（ng-disbaled;ng-readonly）,本文后面會介紹其用法。

js代碼：

var app = angular.module("myApp", []);
 app.controller("myCtr", function($scope) {
  $scope.data = {};　　　　　　//存放用戶輸入的內容，便于后臺調用
  $scope.showAllErr = false; //默認不顯示提示信息
  $scope.check = function(){
   $scope.showAllErr= $scope.myForm.$invalid; //當內容不合法時，顯示內容（此時$invalid=true），可以console.log($scope);找到$invalid,$dirty,$valid,$pristine
   if($scope.myForm.$valid){
    console.log($scope.data); //控制臺打印用戶輸入的內容
   } 
  }11 })

注意：

可以console.log($scope);找到$invalid , $dirty , $valid , $pristine(意思：不合法，被修改，合法，沒被修改）

打開控制臺，找到console.log($scope);打印的內容，找到表單name字段，即可找到以上四個屬性，同樣找到表單內輸入框中的name字段也可找到以上四個屬性。

在此之前，我們要為表單添加name字段，比如我設置為 name="myForm" , 所以即可找 myForm 即可，input同樣

下面是提示語部分，單獨拿出來說一下：

<div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">
     <p ng-show="myForm.username.$invalid && myForm.username.$dirty">請?zhí)顚懹脩裘?lt;/p>
     <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請?zhí)顚懻_電話</p>
     <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請?zhí)顚懙刂?lt;/p>
     <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請?zhí)顚懻_郵箱</p>
     <p ng-show="showAllErr">請?zhí)顚?lt;/p>
</div>

style="height:30px;overflow:hidden;"> ，設置只是顯示一行；

ng-show="myForm.username.$invalid && myForm.username.$dirty" ，默認狀態(tài)下我們沒有提交當然合法，而且也沒有修改；又由于$scope.showAllErr = false;

所以什么提示語也不現實，但是當這些條件一旦滿足，myForm.username.$invalid=true && myForm.username.$dirty=true,便會顯示以上提示語中對應內容，至于

顯示那一條，根據對應的字段顯示，若是username，那就是“請?zhí)顚懹脩裘?，email字段,那就……（字段即 name="XXX",自己為不同的輸入框定義不同字段即可，當然了

上面提到過他們也有：$invalid , $dirty , $valid , $pristine 這四個屬性）

若是什么也不填寫，那就是表單不合法，即 $scope.myForm.$invalid=true，提示 “請?zhí)顚憽薄?/p>

再說說ng-disabled;ng-readonly:

將上述代碼加入下面內容：

 <div class="col-xs-8">
 <input id="address" type="text" ng-model="data.address" name="address" ng-required="true" ng-disabled="isDis">
 <button ng-click="myTogTwo()">toggTwo</button>
 </div>

 <div class="col-xs-8">
  <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1\d{10}$/" ng-required="true" ng-readonly="isWr">
  <button ng-click="myTogOne()">toggOne</button>
 </div>

$scope.isDis = false;
  $scope.isWr = false;
  $scope.myTogOne = function(){
   $scope.isWr = !$scope.isWr;
  }
  $scope.myTogTwo = function(){
   $scope.isDis = !$scope.isDis;
 }

便可以通過點擊按鈕實現輸入框只讀與可寫、可用不可用之間的切換