Legitimate regex for HTML5 form field validation

Question

Is the following regex:

1. url: /\\b(http|https|ftp):\\/\\/([-A-Z0-9.]+)(\\/[-A-Z0-9+&@#\\/%=~_|!:,.;]*)?(\\?[A-Z0-9+&@#\\/%=~_|!:,.;]*)?/i
2. email: /\\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\\.)+[AZ]{2,6}\\b/i

I am using them in inputs like:

  <section id='email-txt' class='flex-column'>
    <label id='address' for='emailTxt'>Address</label>
    <input id=emailTxt
           type='email'
           value='{{webContact.homeEmail}}'
           pattern=/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}\b/i>

  </section>


  <section id='col2' class='flex-column'>
    <label id='type' for='webPageUrl'>Type</label>
    <input id=webPageUrl
           type='url'
           value='{{webContact.homeEmail}}'
           placeholder='http://microsoft.com'
           required
           pattern=/\b(http|https|ftp):\/\/([-A-Z0-9.]+)(\/[-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i>
  </section>

in forms but the validation is always incorrect.

Thanks

Answer 1

The word boundaries \\b are not pertinent in your case. If you do input fields validation, try those regexes with ^ and $ :

url:

/^(http|https|ftp):\/\/([-A-Z0-9.]+)(\/[-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?$/i

email:

/^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}$/i