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

小云云
Lepaskan: 2017-12-22 10:05:45
asal
2479 orang telah melayarinya

现在验证功能处处可见,做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>
Salin selepas log masuk

正则表达式:

1. 匹配空:^$

2. 匹配手机号:^(((\+86)|(86))?1[34578]\d{9})$

3. 控制提示信息的显示:ng-show="myForm.phone.$dirty && myForm.phone.$invalid"

相关推荐:

详解Angular实现表单验证功能

手机注册时发送验证码倒计时功能

php 验证身份证号码

Atas ialah kandungan terperinci AngularJS 实现表单验证手机号功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan