AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
AngularJS 誕生于2009年,由Misko Hevery 等人創(chuàng)建,后為Google所收購(gòu)。是一款優(yōu)秀的前端JS框架,已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性,最為核心的是:MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴(lài)注入等等。
名稱(chēng)為"ngMessages"的module,通過(guò)npm install angular-messages進(jìn)行安裝。在沒(méi)有使用ngMessages之前,我們可能這樣寫(xiě)驗(yàn)證:
<form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> <p ng-show="userForm.username.$error.required">Your username is required.</p> </form>
以上,列舉了每種可能的驗(yàn)證失敗,并且手工編寫(xiě)是否顯示錯(cuò)誤提示信息。
有了"ngMessages"這個(gè)module,大致這么寫(xiě):
<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用戶(hù)名最小長(zhǎng)度5</p> <p ng-message="maxlength">用戶(hù)名最大長(zhǎng)度10</p> <p ng-message="required">用戶(hù)名必填</p> </div>
ngMessages為我們自動(dòng)判斷顯示哪種錯(cuò)誤。
使用ngMessages的幾個(gè)關(guān)鍵點(diǎn):
● npm install angular-messages
● 引用:angular-messages.js
● 依賴(lài):angular.module('app',['ngMessages'])
這里有一個(gè)簡(jiǎn)單的Demo,文件結(jié)構(gòu):
node_modules/
app.js
emailmessages.html
index.html
安裝如下:
npm install bootstrap
npm install angular
npm install angular-messages
==index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style> body{ padding-top: 50px; } </style> </head> <body class="container" ng-app="app" ng-controller="MainCtrl as main"> <form name="userForm" novalidate> <div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}"> <label>用戶(hù)名</label> <input type="text" name="name" class="form-control" ng-model="main.name" ng-minlength="5" ng-maxlength="10" required/> <div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用戶(hù)名最小長(zhǎng)度5</p> <p ng-message="maxlength">用戶(hù)名最大長(zhǎng)度10</p> <p ng-message="required">用戶(hù)名必填</p> </div> </div> <div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}"> <label>郵箱</label> <input type="email" name="email" class="form-control" ng-model="main.email" ng-minlength="5" ng-maxlength="20" required/> <div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched"> <div ng-messages-include="emailmessages.html"></div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-danger">提交</button> </div> <pre>{{userForm.name.$error}}</pre> <pre>{{userForm.email.$error}}</pre> </form> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-messages/angular-messages.js"></script> <script src="app.js"></script> </body> </html>
app.js
angular.module('app',['ngMessages']) .controller('MainCtrl', MainCtrl); function MainCtrl(){ }
emailmessages.html
把有關(guān)email的表單驗(yàn)證放在這里,通過(guò)<div ng-messages-include="emailmessages.html"></div>顯示到頁(yè)面某個(gè)位置上。
<p ng-message="required">郵箱必填</p> <p ng-message="minlength">郵箱長(zhǎng)度太短</p> <p ng-message="maxlength">郵箱長(zhǎng)度太長(zhǎng)</p> <p ng-message="email">郵箱無(wú)效</p>
ps:常用的表單驗(yàn)證指令
1. 必填項(xiàng)驗(yàn)證
某個(gè)表單輸入是否已填寫(xiě),只要在輸入字段元素上添加HTML5標(biāo)記required即可:
<input type="text" required />
2. 最小長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值,在輸入字段上使用指令ng-minleng= "{number}":
<input type="text" ng-minlength="5" />
3. 最大長(zhǎng)度
驗(yàn)證表單輸入的文本長(zhǎng)度是否小于或等于某個(gè)最大值,在輸入字段上使用指令ng-maxlength="{number}":
<input type="text" ng-maxlength="20" />
4. 模式匹配
使用ng-pattern="/PATTERN/"來(lái)確保輸入能夠匹配指定的正則表達(dá)式:
<input type="text" ng-pattern="/[a-zA-Z]/" />
5. 電子郵件
驗(yàn)證輸入內(nèi)容是否是電子郵件,只要像下面這樣將input的類(lèi)型設(shè)置為email即可:
<input type="email" name="email" ng-model="user.email" />
6. 數(shù)字
驗(yàn)證輸入內(nèi)容是否是數(shù)字,將input的類(lèi)型設(shè)置為number:
<input type="number" name="age" ng-model="user.age" />
7. URL
驗(yàn)證輸入內(nèi)容是否是URL,將input的類(lèi)型設(shè)置為 url:
<input type="url" name="homepage" ng-model="user.facebook_url" />
- jquery validate.js表單驗(yàn)證的基本用法入門(mén)
- js 常用正則表達(dá)式表單驗(yàn)證代碼
- JavaScript表單驗(yàn)證完美代碼
- JavaScript 表單驗(yàn)證正則表達(dá)式大全[推薦]
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- javascript制作的簡(jiǎn)單注冊(cè)模塊表單驗(yàn)證
- js正則表達(dá)式注冊(cè)頁(yè)面表單驗(yàn)證
- jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
- JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
- JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例
相關(guān)文章
AngularJs基于角色的前端訪問(wèn)控制的實(shí)現(xiàn)
本篇文章主要介紹了AngularJs實(shí)現(xiàn)基于角色的前端訪問(wèn)控制,可以適用于不同的角色,有需要的可以了解一下。2016-11-11angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例
這篇文章主要介紹了angular2/ionic2 實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08AngularJS中controller控制器繼承的使用方法
這篇文章主要介紹了AngularJS中controller控制器繼承的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11AngularJS的依賴(lài)注入實(shí)例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴(lài)注入,結(jié)合實(shí)例形式分析了依賴(lài)注入的原理及使用module和injector實(shí)現(xiàn)依賴(lài)注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05angular 組件通信的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了angular 組件通信的幾種實(shí)現(xiàn)方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購(gòu)物車(chē)功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12