如何更改默认“请在电子邮件地址中包含@”？答案

【问题标题】：How to change default "please include an @ in the email address"?如何更改默认“请在电子邮件地址中包含@”？
【发布时间】：2018-11-12 03:33:21
【问题描述】：

当用户尚未输入电子邮件时，我已经能够更改错误消息，但是当用户输入格式错误的电子邮件时，我该如何更改错误消息？

这是我用 Bootstrap 4 风格编写的代码：

<div class="form-group">
    <label>Email</label>
    <input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>

【问题讨论】：

你好用这个jqueryvalidation.org
Jquery 验证有利有弊。值得研究一下。
@RizkiDPrast 有什么更简单的吗？
@statosdotcom 这是真的。

标签： html twitter-bootstrap forms bootstrap-4

【解决方案1】：

您只需在输入标签中添加标题即可解决此问题

<input type="email" class="form-control" name="email" id="freeform_email"
                        placeholder="Enter an email" required="required"
                        oninvalid="this.setCustomValidity('Enter an email that contains &quot@&quot. Example: info@roshni.nl')" title="Email: the email contains '@'. Example: info@ros-bv.nl" />

那么你的应该是：

<div class="form-group">
    <label>Email</label>
    <input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')"  oninput="this.setCustomValidity('')" title='<your text>'">
</div>

不客气。

【讨论】：

【解决方案2】：

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
    var x = document.forms["myForm"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}
</script>
</head>

<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>

</html>

您必须更改 alert 中的文本以包含您的自定义消息，并更改 action_page.php 以包含您自己的并添加您想要的样式！

更新

如果您不想实现自己的 JavaScript 函数，那么您可以继续向 oninvalid 添加条件，如下所示：

<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">

【讨论】：

对不起。这段代码是正确的，但它没有回答我的问题。
@Anonymous 感谢您的反馈，请查看我的更新答案。