HTML5 Email Input Pattern Attribute

 

I'm trying to make a html5 form that contains one email input, one check box input, and one submit input. I'm trying to use the pattern attribute for the email input but I don't know what to place in this attribute. I do know that I'm supposed to use a regular expression that must match the JavaScript Pattern production but I don't know how to do this.

What I'm trying to get this attribute to do is to check to make sure that the email contains one @ and at least one or more dot and if possible check to see if the address after the @ is a real address. If I can't do this through this attribute then I'll consider using JavaScript but for checking for one @ and one or more dot I do want to use the pattern attribute for sure.

the pattern attribute needs to check for:

  • only one @
  • one or more dot
  • and if possible check to see if the address after the @ is a valid address

    • An alternative to this one is to use a JavaScript but for all the other conditions I do not want to use a JavaScript

    This is a dual problem (as many in the www world).

    You need to evaluate if the browser supports html5 (I use Modernizr to do it). In this case if you have a normal form the browser will do the job for you, but if you need ajax/json (as many of everyday case) you need to perform manual verification anyway.

    .. so, my suggestion is to use a regular expression to evaluate anytime before submit. The expression I use is the following: 

    var email: /^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$/;

    This one is taken from http://www.regular-expressions.info/ . This is a hard world to understand and master, so I suggest you to read this page carefully.

    我对HTML5s电子邮件输入有这个确切的问题，使用Alwin Keslers上面的回答，我将正则表达式添加到HTML5电子邮件输入中，因此用户必须在最后有一些东西。 

    <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" />

    In HTML5 you can use the new 'email' type: http://www.w3.org/TR/html-markup/input.email.html

    For example: 

    <input type="email" id="email" />

    If the browser implements HTML5 it will make sure that the user has entered a valid email address in the field. Note that if the browser doesn't implement HTML5, it will be treated like a 'text' type, ie: 

    <input type="text" id="email" />
    链接地址: http://www.djcxy.com/p/92924.html

    上一篇: HTML5电子邮件验证

    下一篇: HTML5电子邮件输入模式属性