logo标签列表

如何更改默认的“请在电子邮件地址中包含@”提示信息？

htmltwitter-bootstrapformsbootstrap-4
4

我已经成功修改了用户未输入电子邮件时的错误提示信息，但是当用户输入错误格式的电子邮件时，该如何更改错误提示信息呢？

以下是我使用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>
嗨，请使用这个链接：https://jqueryvalidation.org。 - RizkiDPrast
Jquery验证有其优点和缺陷。值得研究该案例。 - statosdotcom
@RizkiDPrast 有更简单的方法吗？ - Anonymous
1
@statosdotcom 这是真的。 - Anonymous
2个回答
3
您可以通过为input标签添加title属性来解决这个问题。 

<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>

不用谢。

1

以下是一个如何实现它的示例：

<!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
1
@匿名 谢谢您的反馈，请查看我的更新答案。 - Ali Heikal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接