快捷導(dǎo)航

Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的實(shí)例詳解

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

Angular.js是Google開(kāi)發(fā)的前端技術(shù)框架，最近一直在學(xué)習(xí)Angular.js，通過(guò)對(duì)angular.js的簡(jiǎn)單理解后發(fā)現(xiàn)，angular.js通過(guò)一些簡(jiǎn)單的指令即可實(shí)現(xiàn)對(duì)DOM元素的操作，其特色為雙向數(shù)據(jù)綁定，下面這篇文章給大家詳細(xì)介紹Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的方法，一起來(lái)看看吧。

前言

相信大家在做項(xiàng)目里經(jīng)常需要登錄注冊(cè)，那么在用angularjs該如何實(shí)現(xiàn)。下面讓我們通過(guò)angualr.js來(lái)實(shí)現(xiàn)注冊(cè)系統(tǒng)表單驗(yàn)證。

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

首先看一下頁(yè)面效果（通過(guò)bootstrap實(shí)現(xiàn)的布局樣式）：

當(dāng)我們點(diǎn)擊提交按鈕時(shí)，會(huì)根據(jù)表單驗(yàn)證，若通過(guò)，則沒(méi)有提示語(yǔ)句，若不通過(guò)，則會(huì)彈出響應(yīng)提示語(yǔ)句，當(dāng)然該功能可以通過(guò)其他簡(jiǎn)單方式實(shí)現(xiàn)，這里只是通過(guò)實(shí)戰(zhàn)對(duì)angular進(jìn)一步深入理解。

實(shí)現(xiàn)方法如下：

頁(yè)面布局代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">　　　　//設(shè)置按照edge瀏覽器渲染方式渲染
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> //設(shè)置頁(yè)面寬度，縮放比例，用戶不能縮放
 <title>注冊(cè)</title>
 <link rel="stylesheet" href="bootstrap.min.css">
 <style>
  input {
   outline: none; //去掉chrome瀏覽器輸入框內(nèi)的藍(lán)色邊框
  }
 </style>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtr">
  <div class="container">
   <h2 class="text-center">注冊(cè)系統(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"是設(shè)置輸入框內(nèi)必須填寫(xiě)內(nèi)容，下同
      </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/"是設(shè)置正則驗(yàn)證，下同
       
      </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">請(qǐng)?zhí)顚?xiě)用戶名</p>
      <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請(qǐng)?zhí)顚?xiě)正確電話</p>
      <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請(qǐng)?zhí)顚?xiě)地址</p>
      <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請(qǐng)?zhí)顚?xiě)正確郵箱</p>
      <p ng-show="showAllErr">請(qǐng)?zhí)顚?xiě)</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>

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

js代碼：

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

注意：

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

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

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

下面是提示語(yǔ)部分，單獨(dú)拿出來(lái)說(shuō)一下：

<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">請(qǐng)?zhí)顚?xiě)用戶名</p>
     <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請(qǐng)?zhí)顚?xiě)正確電話</p>
     <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請(qǐng)?zhí)顚?xiě)地址</p>
     <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請(qǐng)?zhí)顚?xiě)正確郵箱</p>
     <p ng-show="showAllErr">請(qǐng)?zhí)顚?xiě)</p>
</div>

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

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

所以什么提示語(yǔ)也不現(xiàn)實(shí)，但是當(dāng)這些條件一旦滿足，myForm.username.$invalid=true && myForm.username.$dirty=true,便會(huì)顯示以上提示語(yǔ)中對(duì)應(yīng)內(nèi)容，至于

顯示那一條，根據(jù)對(duì)應(yīng)的字段顯示，若是username，那就是“請(qǐng)?zhí)顚?xiě)用戶名”，email字段,那就……（字段即 name="XXX",自己為不同的輸入框定義不同字段即可，當(dāng)然了

上面提到過(guò)他們也有：$invalid , $dirty , $valid , $pristine 這四個(gè)屬性）

若是什么也不填寫(xiě)，那就是表單不合法，即 $scope.myForm.$invalid=true，提示 “請(qǐng)?zhí)顚?xiě)”。

再說(shuō)說(shuō)ng-disabled;ng-readonly:

將上述代碼加入下面內(nèi)容：

 <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;
 }

便可以通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)輸入框只讀與可寫(xiě)、可用不可用之間的切換