AngularJS实现表单验证手机号功能

来源：动视网责编：小OO 时间：2020-11-27 20:09:53

AngularJS实现表单验证手机号功能

代码如下所示。<；/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"。

推荐度：

点击下载本文 文档为doc格式

导读代码如下所示。<；/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"。

现在验证功能处处可见，做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"