空白时的电子邮件验证

Question

1. HTML5可以自行验证电子邮件表单（不需要JS）。如果用户忘记输入电子邮件并点击提交按钮怎么样，HTML5如何验证空白字段？

   <form>
   <input type="email" placeholder="Enter your email">
   <input type="submit" value="Submit">
   </form>

2. 用户输入错误的电子邮件格式时的消息提示与IE，FireFox不同。在IE中，它说：“你必须以这种格式输入一个电子邮件地址：......”我正在尝试编辑此消息，以便在任何浏览器中显示相同的消息，但我还没有成功， 。请帮帮忙。

Answer 1

添加必需的属性

<input type="email" placeholder="Enter your email" required>

在回答第二个问题时，您可以设置title属性，该属性将文本附加到默认错误消息。为了完全自定义错误消息，您需要编写一些JavaScript。您想要侦听“无效”事件，并使用setCustomValidity设置消息

input.addEventListener('invalid', function(e) {
    if (input.validity.valueMissing) {
        e.target.setCustomValidity("PLZ CREATE A USERNAME, YO!");
    } else if(!input.validity.valid) { 
        e.target.setCustomValidity("U R DOIN IT WRONG!");
    }
}, false);

见：http://developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/

以及自定义所需的消息

HTML5 form required attribute. Set custom validation message?