AngularJS 表單驗證手機號(非必填)

来源:http://www.cnblogs.com/xquancnblogs/archive/2017/11/11/7819110.html
-Advertisement-
Play Games

代碼: 正則表達式: 1. 匹配空:^$ 2. 匹配手機號:^(((\+86)|(86))?1[34578]\d{9})$ 3. 控制提示信息的顯示:ng-show="myForm.phone.$dirty && myForm.phone.$invalid" ...


代碼:

<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">
    聯繫電話格式不正確!</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.$invalid">
</p>
</form>

 

正則表達式:

1. 匹配空:^$ 

2. 匹配手機號:^(((\+86)|(86))?1[34578]\d{9})$

3. 控制提示信息的顯示:ng-show="myForm.phone.$dirty && myForm.phone.$invalid"


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數組去重 function getSingle (arr) { var res = []; var jj = {}; for (i = 0; i < arr.length; i++) { if(!jj[arr[i]]) { res.push(arr[i]); jj[arr[i]] = 1; } } ...
  • 最近面試拿了很多公司的實習offer,只要是面試的都通過了,但其實目標是BTA或者到一個公司的核心技術部,無奈將這些公司一一拒絕。 接下來就分析下麵試題,也能給自己一個提升吧,以便後續的面試更輕車熟路些,題目沒什麼順序,想起什麼寫什麼,還有我面試過程中的一些小套路。 估計要寫好多,每天寫幾道題,而且 ...
  • 前言 深入瞭解一下表格的一些特性。 一、案例需求 首先寫一個表格,然後讓表格隔行換色,具體的效果如下所示: 那麼要怎麼實現呢? 二、實例分析 首先我們需要知道,之前我們學習過表格相關的標簽,但是那時候學習的,只有<table></table>、<tr></tr>、<td></td>等標簽,但是表格的 ...
  • 說起來, 面向切麵編程(AOP)自從誕生之日起,一直都是電腦科學領域十分熱門的話題,但是很奇怪的是,在前端圈子裡,探討AOP的文章似乎並不是多,而且多數拘泥在給出理論,然後實現個片段的定式)難免陷入了形而上學的尷尬境地,本文列舉了兩個生產環境的實際例子論述webpack和AOP預編譯處理的結合,意 ...
  • 前言 當我們進行JavaScript的開發的時候,很經常出現錯誤,但是一行代碼一行代碼的尋找會極大地增加我們的工作量。於是這時候,如果有一個像Eclipse的斷點這樣的功能能夠讓我們快速找到bug的原因的話,那一定能夠節省很多的工作量了。 所以今天這篇博文就來介紹一下關於每個瀏覽器都有的功能:開發者 ...
  • 本文作為小白入門級,相對基礎,是寫給現在想瞭解一點前端知識的設計師同行們,今天這章用設計師熟悉的PS來解釋前端相關的術語,通俗易懂幽默風趣,絕對是小白入門的好教程! 一、樣式大集合 之前介紹了“嵌入樣式”及“內聯樣式”,前者只對自己所在的標簽起作用,後者對當前頁面所有通過了class引用了該樣式的標 ...
  • 1、先準備一個div onchange觸發事件 <input type="file" onchange="preview(this)" ></span> <div id="preview"></div> 2、寫JS代碼 //上傳圖片之前預覽圖片function preview(file){ if ( ...
  • 作為一個初學者,經常會遇到在獲取某一元素的寬度(高度、top值...)時,到底是用 style.width還是offsetWidth的疑惑。 1. 當樣式寫在行內的時候,如 <div id="box" style="width:100px">時,用 style.width或者offsetWidth都 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...