AngularJS 表單驗(yàn)證手機(jī)號(hào)的實(shí)例(非必填)
更新時(shí)間：2017年11月12日 11:41:03 作者：FreshCoder_xq
下面小編就為大家?guī)硪黄狝ngularJS 表單驗(yàn)證手機(jī)號(hào)的實(shí)例(非必填)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
代碼如下所示：
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>電話:<br>
<input type="text" name="phone" ng-model="phone" ng-pattern="/(^$)|^(((\+86)|(86))?1[34578]\d{9})$/">
<span style="color:red" ng-show="myForm.phone.$dirty && myForm.phone.$invalid">
聯(lián)系電話格式不正確！</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.$invalid">
</p>
</form>
正則表達(dá)式：
1. 匹配空：^$
2. 匹配手機(jī)號(hào)：^(((\+86)|(86))?1[34578]\d{9})$
3. 控制提示信息的顯示：ng-show="myForm.phone.$dirty && myForm.phone.$invalid"
以上這篇AngularJS 表單驗(yàn)證手機(jī)號(hào)的實(shí)例(非必填)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- angular實(shí)現(xiàn)表單驗(yàn)證及提交功能
- AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
- 詳解AngularJS中的表單驗(yàn)證(推薦)
- AngularJS手動(dòng)表單驗(yàn)證
- 詳細(xì)解讀AngularJS中的表單驗(yàn)證編程
- AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例
- 強(qiáng)大的 Angular 表單驗(yàn)證功能詳細(xì)介紹
- Angular4表單驗(yàn)證代碼詳解
- Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
- AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
相關(guān)文章
AngularJS基礎(chǔ)學(xué)習(xí)筆記之簡(jiǎn)單介紹
AngularJS 不僅僅是一個(gè)類庫，而是提供了一個(gè)完整的框架。它避免了您和多個(gè)類庫交互，需要熟悉多套接口的繁瑣工作。它由Google Chrome的開發(fā)人員設(shè)計(jì)，引領(lǐng)著下一代Web應(yīng)用開發(fā)。也許我們5年或10年后不會(huì)使用AngularJS，但是它的設(shè)計(jì)精髓將會(huì)一直被沿用。2015-05-05
本文主要介紹AngularJS XHR和依賴注入，這里整理了詳細(xì)資料和示例代碼，有興趣的小伙伴可以參考下2016-08-08
實(shí)例詳解angularjs和ajax的結(jié)合使用
本篇文章給大家介紹angularjs和ajax的結(jié)合使用，本文介紹的非常詳細(xì)，對(duì)angularjs和ajax感興趣的朋友一起參考下吧2015-10-10
AngularJS實(shí)用基礎(chǔ)知識(shí)_入門必備篇(推薦)
下面小編就為大家?guī)硪黄狝ngularJS實(shí)用基礎(chǔ)知識(shí)_入門必備篇(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能,涉及AngularJS過濾器、排序及字符串遍歷、查詢等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Angular2 PrimeNG分頁模塊學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了Angular2 PrimeNG分頁模塊學(xué)習(xí)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
本文主要介紹AngularJS ng-csp 指令,這里對(duì)ng-csp 的基礎(chǔ)資料的整理,并附代碼實(shí)例和實(shí)現(xiàn)效果圖,有需要的小伙伴參考下2016-08-08
對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular Module聲明和獲取重載實(shí)例代碼
這篇文章主要介紹了Angular Module聲明和獲取重載實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了AngularJS的臟檢查深入分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04