AngularJs 最新驗證手機號碼的實例,成功測試通過

更新時間：2017年11月26日 12:35:36 作者：峰雨同行

下面小編就為大家分享一篇AngularJs 最新驗證手機號碼的實例,成功測試通過，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧

實例如下：

<form name="signUpForm" novalidate>

  <div class="form-group">
  <div class="row clearfix">
   <label for="tel1" class="col-xs-12" style="text-align: left">L張蒙號碼1：</label>
   <div style="text-align: center" class="col-xs-12">
    <input id="tel1" type="tel" name="tel1"
        data-ng-model="vm.tel1"
        ng-minlength="11"
        ng-pattern="/^1[3|5][0-9]\d{4,8}$/" required
        style="width: 80%;font-size: large"
        placeholder="請輸入號碼1："/>
   </div>
   <div class="col-xs-12">
    <p class="glyphicon glyphicon-ok input_result text-success"
      ng-if="signUpForm.tel1.$valid"></p>
    <p class="text-danger glyphicon glyphicon-remove"
      ng-if="signUpForm.tel1.$error.required&&signUpForm.tel1.$touched">電話不能為空！</p>
    <p class="text-danger glyphicon glyphicon-remove"
      ng-if="(signUpForm.tel1.$error.minlength||signUpForm.tel1.$error.maxlength||signUpForm.tel1.$error.pattern)&&signUpForm.tel1.$touched">請輸入有效手機號!</p>
   </div>
  </div>
</form>

以上這篇AngularJs 最新驗證手機號碼的實例,成功測試通過就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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

相關(guān)文章

Angular應(yīng)用Bootstrap過程步驟邏輯詳解
這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過程步驟邏輯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
Angular使用Restful的增刪改
今天小編就為大家分享一篇關(guān)于Angular使用Restful的增刪改，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-12-12
AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實現(xiàn)自定義模塊自動加載的方法,結(jié)合實例形式分析了ng-app自動加載我們自定義的模塊作為根模塊的操作步驟與實現(xiàn)技巧,需要的朋友可以參考下
2017-01-01
詳解angular2 控制視圖的封裝模式
這篇文章主要介紹了詳解angular2 控制視圖的封裝模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
AngularJS入門教程之Helloworld示例
這篇文章主要介紹了AngularJS入門教程之Helloworld示例,結(jié)合Helloworld入門示例分析了AngularJS的功能、原理、MVC框架、數(shù)據(jù)綁定與相關(guān)使用技巧,需要的朋友可以參考下
2016-12-12
Angular8引入百度Echarts進行圖表分析的實現(xiàn)代碼
這篇文章主要介紹了Angular8引入百度Echarts進行圖表分析的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Angularjs 根據(jù)一個select的值去設(shè)置另一個select的值方法
今天小編就為大家分享一篇Angularjs 根據(jù)一個select的值去設(shè)置另一個select的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
詳解angularjs中如何實現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實現(xiàn)控制器和指令之間交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。
2016-12-12
Angular 5.0 來了! 有這些大變化
Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下
2017-11-11