代码:

<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. 织梦dedecms标签调用集合,绝对是仿站必备利器

    今天分享下整理了织梦dedecms标签调用集合,绝对是仿站必备利器啊,觉得有用就转走吧!温馨小提示:CTRL+F 搜索你需要的标签名,就可以方便找到:织梦dedecms标签调用集合-首页标签:网站导航 ...

  2. jsorder 第三方修改版 修正bug 增加总价

    我主要运用这个jsorder,修正了它的不足//1.0版本bug:刷新页面 无法增加或者删除原来添加的商品//1.1版本:修正了1.0版本  新增bug 能够修改原来的商品 但出现产品数量为0 仍然保 ...

  3. 一步一步学Silverlight 2系列(11):数据绑定

    概念 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. 【前端】Nodejs给没有引号的json数据添加引号

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/node_json.html 我们经常会遇到一些json数据需要放到json文件中,然后动态加载的场景. 但是也经常 ...

  5. codeforces round 422 div2 补题 CF 822 A-F

    A I'm bored with life 水题 #include<bits/stdc++.h> using namespace std; typedef long long int LL ...

  6. zabbix忘记登录密码重置方法

    1.忘记zabbix之后,先用mysql查看一下: [root@centos7-106 ~]# mysql -uroot -p -e "select * from zabbix.users\ ...

  7. Ubuntu中字体的改变

    1.sudo dpkg-reconfigure console-setup 2.弹出 Configuring console-setup 界面,选择适当的编码格式,我们一般选择默认的UTF-8,选择O ...

  8. 北京师范大学第十四届ACM决赛-重现赛 F:Training Plan(DP)

    传送门 题意 将n个数分成m个集合,\(V_i表示max(x-y),x,y∈第\)i个集合,\(求minΣV_i\) 分析 我们先对难度排序,令dp[i][j]表示前i个数分成j个集合的最小费用 转移 ...

  9. POJ3468【线段树lazy操作】

    上午理论AC,打到现在快吐了... 一个那么**Lazy操作打成这样,query操作和update操作都有问题,妈蛋,发现是mid<=s+1-真是蠢到家,明明是mid+1<=s卧槽连左和右 ...

  10. python 闭包 闭包与装饰器之间的关系

    一.一个闭包的实际应用例子 def func(a, b): def inner(x): return a * x + b return inner inn = func(1, 1) print(inn ...