Angular.js實(shí)現(xiàn)注冊(cè)系統(tǒng)的實(shí)例詳解
前言
相信大家在做項(xiàng)目里經(jīng)常需要登錄注冊(cè),那么在用angularjs該如何實(shí)現(xiàn)。下面讓我們通過angualr.js來實(shí)現(xiàn)注冊(cè)系統(tǒng)表單驗(yàn)證。
Angular下載地址:https://code.angularjs.org/1.5.0/angular.js
首先看一下頁(yè)面效果(通過bootstrap實(shí)現(xiàn)的布局樣式):
當(dāng)我們點(diǎn)擊提交按鈕時(shí),會(huì)根據(jù)表單驗(yàn)證,若通過,則沒有提示語句,若不通過,則會(huì)彈出響應(yīng)提示語句,當(dāng)然該功能可以通過其他簡(jiǎn)單方式實(shí)現(xiàn),這里只是通過實(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)必須填寫內(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í)顚懹脩裘?lt;/p> <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請(qǐng)?zhí)顚懻_電話</p> <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請(qǐng)?zhí)顚懙刂?lt;/p> <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請(qǐng)?zhí)顚懻_郵箱</p> <p ng-show="showAllErr">請(qǐng)?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>
如上頁(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
(意思:不合法,被修改,合法,沒被修改)
打開控制臺(tái),找到console.log($scope);
打印的內(nèi)容,找到表單name字段,即可找到以上四個(gè)屬性,同樣找到表單內(nèi)輸入框中的name字段也可找到以上四個(gè)屬性。
在此之前,我們要為表單添加name字段,比如我設(shè)置為 name="myForm"
, 所以即可找 myForm 即可,input同樣
下面是提示語部分,單獨(dú)拿出來說一下:
<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í)顚懹脩裘?lt;/p> <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">請(qǐng)?zhí)顚懻_電話</p> <p ng-show="myForm.address.$invalid && myForm.address.$dirty">請(qǐng)?zhí)顚懙刂?lt;/p> <p ng-show="myForm.email.$invalid && myForm.email.$dirty">請(qǐng)?zhí)顚懻_郵箱</p> <p ng-show="showAllErr">請(qǐng)?zhí)顚?lt;/p> </div>
style="height:30px;overflow:hidden;">
,設(shè)置只是顯示一行;
ng-show="myForm.username.$invalid && myForm.username.$dirty"
,默認(rèn)狀態(tài)下我們沒有提交當(dāng)然合法,而且也沒有修改;又由于$scope.showAllErr = false;
所以什么提示語也不現(xiàn)實(shí),但是當(dāng)這些條件一旦滿足,myForm.username.$invalid=true && myForm.username.$dirty=true,
便會(huì)顯示以上提示語中對(duì)應(yīng)內(nèi)容,至于
顯示那一條,根據(jù)對(duì)應(yīng)的字段顯示,若是username,那就是“請(qǐng)?zhí)顚懹脩裘?,email字段,那就……(字段即 name="XXX",自己為不同的輸入框定義不同字段即可,當(dāng)然了
上面提到過他們也有:$invalid
, $dirty
, $valid
, $pristine
這四個(gè)屬性)
若是什么也不填寫,那就是表單不合法,即 $scope.myForm.$invalid=true
,提示 “請(qǐng)?zhí)顚憽薄?/p>
再說說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; }
便可以通過點(diǎn)擊按鈕實(shí)現(xiàn)輸入框只讀與可寫、可用不可用之間的切換
補(bǔ)充兩個(gè)事件:ng-change
;ng-submit
ng-change
:用來檢測(cè)用戶輸入是否發(fā)生變化
ng-submit
:用來檢測(cè)表單提交事件,只可用于form元素(意只對(duì)表單本身有效)
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
- 3個(gè)可以改善用戶體驗(yàn)的AngularJS指令介紹
- AngularJS用戶選擇器指令實(shí)例分析
- AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
- AngularJS實(shí)現(xiàn)用戶登錄狀態(tài)判斷的方法(Model添加攔截過濾器,路由增加限制)
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- 總結(jié)十個(gè)Angular.js由淺入深的面試問題
- 淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
- Angular.js如何從PHP讀取后臺(tái)數(shù)據(jù)
- Angular.js回顧ng-app和ng-model使用技巧
相關(guān)文章
Angular項(xiàng)目如何升級(jí)至Angular6步驟全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于Angular項(xiàng)目如何升級(jí)至Angular6的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09angularjs實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09理解Angular的providers給Http添加默認(rèn)headers
本篇文章主要介紹了理解Angular的providers給Http添加默認(rèn)headers,具有一定的參考價(jià)值,有興趣的同學(xué)可以了解一下2017-07-07