Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Verifying forms</title>
</head>
<body>
  <dl>
    <dt>
      URLs (no 
      <a href="https://en.wikipedia.org/wiki/Internationalized_domain_name" title="Internationalized domain name">
        IDNs
      </a>):
    <dd>
      <input type="url" name="url1"
         maxlength="2083"
         pattern="https?:\/\/(?![^\/]{253}[^\/])((?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}|((1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5]))\.){3}(1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5])))(\/.*)?">
    </dd>
    <dt>
      URLs (including IDNs; MUCH less strict)
    </dt>
    <dd>
      <input type="url" name="url2"
         maxlength="2083"
         pattern="https?:\/\/(?!.{253}.+$)((?!-.*|.*-\.)([^ !-,\.\/:-@\[-`{-~]{1,63}\.)+([^ !-\/:-@\[-`{-~]{2,15}|xn--[a-zA-Z0-9]{4,30})|(([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9])\.){3}([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9]))(\/.*)?">
    </dd>
    
    <dt>
      Email addresses:
    </dt>
    <dd>
      <input type="email" name="mail"
             pattern="(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}">
    </dd>
    
    <dt>
      Phone numbers (with spaces)
    </dt>
    <dd>
      <input type="tel" name="phone1"
             pattern="((\+|00)?[0-9]{2}|0)[1-9]( ?[0-9]){8}">
    </dd>
    <dt>
      Phone numbers (without spaces)
    </dt>
    <dd>
      <input type="tel" name="phone2"
             pattern="((\+|00)?[0-9]{2}|0)[1-9]([0-9]){8}">
    </dd>
    <dt>
      Western-type names (watch out when internationalising!) (does include Greek and accented Latin letters)
    </dt>
    <dd>
      <input type="text" name="name"
             pattern="([A-ZΆ-ΫÀ-ÖØ-Þ][A-ZΆ-ΫÀ-ÖØ-Þa-zά-ώß-öø-ÿ]{1,19} ?){1,10}">
    </dd>
</body>
</html>
 
input:valid {
  background-color:#9F9;
}
input:invalid {
  background-color:#F99;
}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Joeytje50pro
0viewers