代码:

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

AngularJS 表单验证手机号(非必填)的更多相关文章

  1. AngularJs表单验证

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  2. angularjs表单验证checkbox

    angularjs中默认有表单验证的支持,见文末的refer 我想要验证至少要选择一个checkbox,否则就不能提交 但是checkbox貌似没有简单的方法,想来想去给出下面的解决方案 valida ...

  3. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  4. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  5. AngularJS表单验证,手动验证或自动验证

    AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证. 手动验证 所谓手动验证是通过AngularJS表单的属性来验证.而成为AngularJS表单必须满足两个条件:1.给form元 ...

  6. AngularJS 表单验证小结

    注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...

  7. 彻底弄懂angularJS表单验证

    常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...

  8. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

  9. [Angularjs]表单验证

    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...

随机推荐

  1. 2013级新生程序设计基础竞赛-正式赛 F 异或最大值 解题报告

    F - 异或最大值 Time Limit: 2000/1000MS (Java/Others)      Memory Limit: 128000/64000KB (Java/Others) Subm ...

  2. hdu 2680 Choose the best route 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2680 题目意思:实质就是给定一个多源点到单一终点的最短路. 卑鄙题---有向图.初始化map时 千万不 ...

  3. Python(1)(安装与基本使用)

    1.Python的下载和安装我就不废话了,百度上都有. 我安装的是Python 3.4.3 64bit 安装完之后,打开Cmd,输入Python 显示以上相同,按照百度的意思就是安装成功. 2.配置环 ...

  4. Gym - 100342J:Triatrip(Bitset加速求三元环的数量)

    题意:求有向图里面有多少个三元环. 思路:枚举起点A,遍历A可以到的B,然后求C的数量,C的数量位B可以到是地方X集合,和可以到A的地方Y集合的交集(X&Y). B点可以枚举,也可以遍历.(两 ...

  5. SpringMVC将url生成二维码图片直接展示在页面上

    利用google的开源包zxing生成二维码 第一步:maven项目的zxing依赖 <!-- google zxing 生成二维码 --> <dependency> < ...

  6. MyBatis学习 之 七、mybatis各种数据库的批量修改

      MyBatis的update元素的用法与insert元素基本相同,因此本篇不打算重复了.本篇仅记录批量update操作的sql语句,懂得SQL语句,那么MyBatis部分的操作就简单了. 注意:下 ...

  7. SKU的结构与页面渲染

    http://blog.jobbole.com/109138/?lwfrom=user_dingfriend

  8. JSON --- 一种轻量级的数据交换格式

    目录 1. 语法 2. 解析与序列化 JSON.stringify( jsData[, filter, indent] ) JSON.parse( jsonData[, reduction]) JSO ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介

    新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...

  10. 与adb相关的问题,比如掉线问题、Android Studio 提示Session 'app':Error Installing APK、找不到设备

    这一篇帖子 会写的比较简单 不过相信大家也可能遇到这些问题   为了怕自己忘记  记录下来  顺便也和大家一起分享 描述:在一些机型上安装软件 提示卸载原先的软件  但是又安装不上新软件 DELETE ...