AngularJS 表单验证手机号的实例(非必填)


Posted in Javascript onNovember 12, 2017

代码如下所示:

<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 表单验证手机号的实例(非必填)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python框架django项目部署相关知识详解
2019/11/04 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
舞出我人生观后感
2015/06/16 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Pandas 数据编码的十种方法
2022/04/20 Python
Django框架中视图的用法
2022/06/10 Python