AngularJS implements form verification mobile phone number function

Nowadays, verification functions can be seen everywhere, and they are often encountered when doing PHP development. Angular form verification is divided into two types of verification: 1. Built-in verification (required, minlength, etc.); 2. Custom verification (regular expression). The editor of this article will bring you an example of verifying a mobile phone number in an AngularJS form (not required). The editor thinks it is quite good, so I will share it with you now and give it as a reference. I hope it can help everyone.

The code is as follows:

<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>

Regular expression:

1. Match empty: ^$

2. Match mobile phone number: ^(( (\+86)|(86))?1[34578]\d{9})$

3. Control the display of prompt information: ng-show="myForm.phone.$dirty && myForm. phone.$invalid"

Related recommendations:

Detailed explanation of Angular's form verification function

Send verification code countdown function when mobile phone registration

php Verify ID number

The above is the detailed content of AngularJS implements form verification mobile phone number function. For more information, please follow other related articles on the PHP Chinese website!