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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
Javascript Objects详解
Sep 04 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Python的subprocess模块总结
2014/11/07 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python调用Windows命令打印文件
2020/02/07 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
ORACLE第二个十问
2013/12/14 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
优秀部门获奖感言
2014/02/14 职场文书
大学班级文化建设方案
2014/05/06 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
学校教学工作总结2015
2015/05/19 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers