html-form：电子邮件未针对模式进行验证答案

【问题标题】：html-form: email not validating against patternhtml-form：电子邮件未针对模式进行验证
【发布时间】：2023-03-23 00:15:02
【问题描述】：

我很绝望。尝试使用模式验证电子邮件表单字段但它不起作用。

这是字段：

<form id="benutzerform" name="benutzerform" action="" method="POST" class="row g-3 mb-3 pb-3 needs-validation" novalidate="true">
....
<div class="input-group has-validation">
    <span class="input-group-text"><i class="bi bi-at"></i></span>
    <input type="email" class="form-control" id="email" pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i" required>
    <div class="invalid-feedback"> Eine korrekte Emailadresse ist unbedingt erforderlich!  </div>
</div>

它总是显示无效反馈。

当我在控制台中执行此操作时，它可以工作。

mailpattern=/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
mailpattern.test('me@home.de');
true

但使用此函数验证失败：

function validateFormFields()
{
    let f = document.getElementsByClassName('needs-validation')[0];
    if (f.checkValidity() === false) 
    {
        f.classList.add('was-validated');
        return false;
    }
    return true;
}

我哪里出错了？

S O L U T I O N

两种方式（@Developer 和@Ryszard Czech）都可以验证表单。但最简单和最快的方法是删除斜线。然后checkValidity() 就可以正常工作了！

【问题讨论】：

你的元素有什么这个类：needs-validation'?
这就是引导程序在客户端验证时显示消息的方式。 f.checkValidity() 将伪类 :invalid 或 :valid 添加到表单字段中，当表单类更改为 .was-validated 时，引导程序显示无效反馈字段
请出示您的<form>标签。
我将表单标签添加到我的初始帖子中。表单的其余部分会像您期望的那样进行验证...
验证电子邮件地址的最佳方法是发送电子邮件并检查返回值。请看看这些网站：TLD list; valid/invalid addresses; regex for RFC822 email address

标签： javascript html regex email

【解决方案1】：

使用

pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}"

删除斜线和标志，[a-zA-Z] 本身不区分大小写。

如果您需要使用第二个表达式，请使用

pattern="[\w.-]+@[\w.-]+\.\w{2,4}"

【讨论】：

谢谢。删除斜线使其工作！

【解决方案2】：

这是你需要的吗？主要的两个问题是

为了防止错误，您的类中没有任何元素带有“需要验证”（我添加到您的函数中以检查是否没有“需要验证”类）。
您发布的正则表达式未应用于代码，并且 Html f.checkValididy() 函数似乎不起作用，因此我将 Html 验证替换为您的正则表达式。

这是代码段：

<html>

<head>

</head>

<body>
    <div class="input-group has-validation">
        <span class="input-group-text"><i class="bi bi-at"></i></span>
        <input type="email" class="form-control needs-validation" id="email" pattern="/[^@]+@[^@]+\.[a-zA-Z]{2,}/i" required>
        <div class="invalid-feedback"> Eine korrekte Emailadresse ist unbedingt erforderlich! </div>
        <button onclick="alert(validateFormFields());">validate!</button>
    </div>
</body>
<script>
    function validateFormFields() {
        if (document.getElementsByClassName('needs-validation').length > 0) {
            let f = document.getElementsByClassName('needs-validation')[0];
            if (emailAdressIsValid(f.value) === false) {
                f.classList.add('was-validated');
                f.classList.remove('needs-validation');
                return false;
            }
        }
        return true;
    }

    function emailAdressIsValid(email) {
        mailpattern = /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
        return mailpattern.test(email);
    }
</script>

</html>

【讨论】：

OP 使用Bootstrap。
我也想过这个解决方案。但是从文档中，我希望在正则表达式检查器中验证良好的正则表达式或在控制台中如上所述的那样，也应该在我的函数中验证。但它没有......