表格和输入所需的电子邮件类型答案

【问题标题】：Form and required email type for input表格和输入所需的电子邮件类型
【发布时间】：2017-07-05 14:02:13
【问题描述】：

当我创建一个需要输入的表单时：

<form action="" id="FormMessage"  method="post" >
    <div style="max-width:700px;">
                    <input name="InputEmail" id="InputName" class="email" type="text" width="100%" placeholder="Your email" required>
            <div style="padding-top:20px">
                <button id="BtMessage" class="btn btn-primary">Send</button>
            </div>
    </div>
 </form>

如果未填写，我们会收到以下警告消息：

在未填写电子邮件的情况下尝试单击“发送”按钮的示例：http://jsfiddle.net/c9b47j9j/

有什么方法可以得到同样的信息，但如果填写的不是电子邮件？

【问题讨论】：

如果答案对您和其他人有帮助，请点赞。

标签： jquery forms twitter-bootstrap email-validation

【解决方案1】：

你用过

type='text' 但你需要使用这个 type='email'

【讨论】：

【解决方案2】：

这是因为你在

中写了“需要”

<input name="InputEmail" id="InputName" class="email" type="text" width="100%" placeholder="Your email" required>`

这实际上是 Chrome、Firefox、Safari、IE 9+ 和 Edge 中的 HTML 验证关键字。

如果您想在没有此警报的情况下验证空字段验证，请删除“必需”关键字并改用 JavaScript 代码。

【讨论】：

【解决方案3】：

然后您需要将输入type="text" 更改为type="email"。然后它将自动验证该字段为 EMAIL。但请记住，这只是 HTML 5 验证。

如果你想使用更多额外的验证，你需要使用JS OR jQuery pulgins，或者自己写。下面是一些 jQuery 表单验证插件链接：：

【讨论】：

【解决方案4】：

使用 input type='email' 代替 input type='text'。这将验证用户是否输入了有效的电子邮件地址。

现在所有主流浏览器都支持此功能：

http://caniuse.com/#search=type%3Demail

实现此目的的另一种方法是使用模式属性应用正则表达式：

https://www.w3schools.com/tags/att_input_pattern.asp

【讨论】：

【解决方案5】：

您可以使用以下。默认情况下，它将验证电子邮件。无需代码。

<input type='email' />

【讨论】：