URL regex validation

Author: alvarosabu

dev/App.vue

@@ -52,6 +52,7 @@ import {
   email,
   pattern,
   maxLength,
+  url,
   /* } from '../dist/as-dynamic-forms.common'; */
 } from '../src/main';
 
@@ -109,6 +110,13 @@ const data = () => ({
           ),
         ],
       }),
+      new FormField({
+        type: 'url',
+        label: 'Website',
+        name: 'website',
+        customClass: 'col-12',
+        validations: [new FormValidation(url, `Format of Url is incorrect`)],
+      }),
       new FormField({
         type: 'select',
         label: 'Category',

src/components/dynamic-input/DynamicInput.vue

@@ -12,6 +12,7 @@
         formControl.type === 'text' ||
         formControl.type === 'email' ||
         formControl.type === 'password' ||
+        formControl.type === 'url' ||
         formControl.type === 'number'
       "
       :formControl="formControl"

src/core/utils/validators.js

@@ -2,6 +2,7 @@ export const isEmptyInputValue = value =>
   value == null || value === '' || value.length === 0;
 
 const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
+const URL_REGEXP = /^((?:(https?):\/\/)?((?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9])\.)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9][0-9]|[0-9]))|(?:(?:(?:\w+\.){1,2}[\w]{2,3})))(?::(\d+))?((?:\/[\w]+)*)(?:\/|(\/[\w]+\.[\w]{3,4})|(\?(?:([\w]+=[\w]+)&)*([\w]+=[\w]+))?|\?(?:(wsdl|wadl))))$/;
 
 export const required = control =>
   isEmptyInputValue(control.value) ? { required: true } : null;
@@ -36,6 +37,13 @@ export const email = control => {
   return EMAIL_REGEXP.test(control.value) ? null : { email: true };
 };
 
+export const url = control => {
+  if (isEmptyInputValue(control.value)) {
+    return null; // don't validate empty values to allow optional controls
+  }
+  return URL_REGEXP.test(control.value) ? null : { email: true };
+};
+
 export const minLength = minLength => control => {
   if (isEmptyInputValue(control.value)) {
     return null; // don't validate empty values to allow optional controls
@@ -90,4 +98,5 @@ export default {
   minLength,
   maxLength,
   pattern,
+  url,
 };