Introduction
In this blog, let's discuss how to validate a form with AngularJS ng-pattern using regular expressions.
Background
Most of the times, we have to create form with validate input fields. Then we require to write code in JavaScript or server-side code for validation .This blog will show you how to achieve validation with reg-ex very easily.
Below, I have created a demostration example.
Step 1

We create HTML file and include reference of AngularJS file from CDN.
Step 2

We create ng-app, ng-controller, and inject module.
Step 3

We create Controller in JavaScript .
Step 4

We use ng-pattern for giving regular expression.
Step 5

We create span or div for hiding and showing when user input is $dirty or $invalid value.
HTML Code Snippet
  1. <html ng-app="myApp">
  2. <head>
  3. <title>ng-pattern with regx</title>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <h1 style="text-align:center">Validation Example</h1>
  8. <div ng-controller="cntrl" style="margin-left:500px">
  9. <form name="SaveForm" ng-submit="funcSave()">
  10. <table border="1" cellspacing="0" cellpadding="10">
  11. <tr>
  12. <td>Name</td>
  13. <td><input type="text" required maxlength="60" ng-pattern="/^[a-zA-Z. ]*[a-zA-Z]{1,60}$/" name="name" ng-model="name" />
  14. <br/>
  15. <span style="color:red" ng-show="SaveForm.name.$dirty && SaveForm.name.$invalid" class="ng-hide">
  16. Please Enter Valid Name.!
  17. </span>
  18. </td>
  19. </tr>
  20. <tr>
  21. <td>Date Of Birth (dd/mm/yyyy)</td>
  22. <td><input type="text" required ng-pattern="/^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](19|20)\d\d$/" ng-model="dob" name="dob" />
  23. <br/>
  24. <span style="color:red" ng-show="SaveForm.dob.$dirty && SaveForm.dob.$invalid" class="ng-hide">
  25. Please Enter Valid Date Of Birth.!
  26. </span>
  27. </td>
  28. </tr>
  29. <tr>
  30. <td>Email</td>
  31. <td><input type="text" maxlength="100" required ng-pattern="/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/" name="email" ng-model="email" />
  32. <br/>
  33. <span style="color:red" ng-show="SaveForm.email.$dirty && SaveForm.email.$invalid" class="ng-hide">
  34. Please Enter Valid Email.!
  35. </span>
  36. </td>
  37. </tr>
  39. <tr>
  40. <td>Mobile No </td>
  41. <td><input type="text" required maxlength="10" ng-pattern="/^[7-9][0-9]{9}$/" name="mobileno" ng-model="mobileno" />
  42. <br/>
  43. <span style="color:red" ng-show="SaveForm.mobileno.$dirty && SaveForm.mobileno.$invalid" class="ng-hide">
  44. Please Enter Valid Mobile No.!
  45. </span>
  46. </td>
  47. </tr>
  49. <tr>
  50. <td>Pin code </td>
  51. <td><input type="text" required maxlength="6" ng-pattern="/^[1-9][0-9]{5}$/" name="pincode" ng-model="pincode" />
  52. <br/>
  53. <span style="color:red" ng-show="SaveForm.pincode.$dirty && SaveForm.pincode.$invalid" class="ng-hide">
  54. Please Enter Valid Pin.!
  55. </span>
  56. </td>
  57. </tr>
  59. <tr>
  60. <td colspan="4" style="text-align:center"><input type="submit" value="submit" /></td>
  61. </tr>
  62. </table>
  63. </form>
  64. </div>
  65. </body>
  66. </html>
JavaScript Code Snippet
  1. <script>
  2. var app = angular.module("myApp", []);
  3. app.controller('cntrl',function($scope){
  5. $scope.funcSave = function()
  6. {
  7. if($scope.SaveForm.$valid) {
  8. alert("Form is Valid..!!");
  9. }
  10. else
  11. {
  12. alert("Form is not Valid..!!");
  13. }
  14. }
  16. })
  18. </script>
Output Screenshots

Note

One thing that you should keep in mind is - ng-pattern given name tag is required in input box and textarea. You can also create common JSON file for all forms accessing regx and given value in $rootscope.
Summary
I hope, you understood how to use regular expression in AngularJS ng-pattern.