首頁 > web前端 > js教程 > AngularJS 實作表單驗證手機號碼功能

AngularJS 實作表單驗證手機號碼功能

小云云
發布: 2017-12-22 10:05:45
原創
2524 人瀏覽過

現在驗證功能處處可見,做php開發的時候也是經常遇到,Angular表單驗證分為兩種驗證:1.內建驗證(required,minlength等);2.自訂驗證(正規表示式)。本文小編就為大家帶來一篇AngularJS 表單驗證手機號碼的實例(非必填)。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考,希望能幫助大家。

程式碼如下:

<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"

相關推薦:

詳解Angular實作表單驗證功能

手機註冊時發送驗證碼倒數功能

php 驗證身分證號碼

#

以上是AngularJS 實作表單驗證手機號碼功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板