Question

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

<form> <input type="email" placeholder="Enter your email"> <input type="submit" value="Submit"> </form>
用户输入错误的电子邮件格式时的消息提示与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?

空白时的电子邮件验证

1 个答案: