Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Regular Expression Pattern

Ghislain B edited this page Aug 4, 2015 · 39 revisions

Since version 1.3.35

With Angular-Validation you can also use custom regular expression, there is no limitation on this validator itself and you can even use the pipe " | " inside the regular expression without being scared of interfering with the other validation filters. The only thing required, is to prefix the validator with pattern= and then add your regular expression pattern and at the end use :alt= to provide an Alternate Text for showing the error message. There is also no need to escape anything, just use regular expression and you're good to go. So in short, it would look like this pattern=/.../:alt=Your error message

####Directive

<!-- let's define a quick pattern for testing date code (YYWW) -->
<input type="text" name="datecode" 
    validation="pattern=/^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$/:alt=Pattern must be YYWW" />

<!-- you can also mix it with other validators -->
<input type="text" name="datecode" 
    validation="alpha|exact_len:4|pattern=/^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$/:alt=Pattern must be YYWW|required" />

<!-- another sweet example, a person full name (first+last name) -->
<input type="text" name="fullname"
    validation="alpha_dash_spaces|pattern=/(\w+)\s(\w+)/:alt=Provide your full name|required" />

####Service Same thing but your validator rules are defined in the controller

// inject the validationService inside your Controller
myApp.controller('Ctrl', function ($scope, validationService) {
  // start by creating the service
  var myValidation = new validationService();

  // full definition
  myValidation.addValidator({
    elmName: 'datecode',
    scope: $scope,
    rules: 'pattern=/^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$/:alt=Pattern must be YYWW|required'
  });

  // or defined as 1 liner
  myValidation
    .addValidator('datecode', 'pattern=/^(0[9]|1[0-9]|2[0-9]|3[0-9])(5[0-2]|[0-4][0-9])$/:alt=Pattern must be YYWW|required');
    .addValidator('fullname', 'pattern=/(\w+)\s(\w+)/:alt=Provide your full name|required');
});

#####Test your Regular Expression Pattern before adding it to Angular-Validation Make sure they work before adding them as a validation

// pattern accepting 2 words separated by a space (example a person full name)
var pattern = /(\w+)\s(\w+)/;
var result1 = pattern.test("John Smith");   // will return True
var result2 = pattern.test("JohnSmith");    // will return False

#####Add it as a validation Alright we tested it, let's use it

<input type="text" name="fullname" 
    validation="pattern=/(\w+)\s(\w+)/:alt=You must provide your full name|required" />

###Important Notice (on previous implementation) ######regex: ... :regex is Deprecated Previous (regex) implementation of regex: ... :regex has been deprecated but is still part of Angular-Validation, so don't be afraid as it won't break your code, even if you keep the old implementation (both implementations old/new works). ######Why? The usage of it was different and was requesting a few things: required to escape everything, required providing an error message directly inside the validator and finally was not close enough (to my taste) to regular expression. Since I also created the :alt= (alternate text) later in the development of the library, it also make sense to use it, so that it follows a much more concise standard. ######Suggestion So I strongly suggest you to update your code and use the new pattern= validator, you will gain in term of how easy it is to add custom regular expression... but don't being afraid break changes, your code does still works with the old implementation. It's just a suggestion ;)

Clone this wiki locally