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

Posted 2023-02-22

【中文标题】表格和输入所需的电子邮件类型

【英文标题】：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"  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/

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

【问题讨论】：

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

【参考方案1】：

你用过

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

【参考方案2】：

这是因为你在

中写了“需要”

<input name="InputEmail" id="InputName" class="email" type="text"  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 表单验证插件链接：：

https://jqueryvalidation.org/ http://www.formvalidator.net/

【参考方案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' />