如何验证表单中的电子邮件

Question

即使用户甚至没有在电子邮件字段中输入“@”，我的表单也会发送。

如果没有“@”，我怎么办才能让红色边框离开？

<input type="text" name="Name" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="City" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="phone" placeholder="Telefone..." class="quote-form-element" />
<input type="text" name="email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last" />

Answer 1

将其变为函数并使用正则表达式检查电子邮件是否有效。

function emailVal(email){
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if (reg.test(emailField.value) == false) 
    {
        //invalid email
        return false;
    }

    return true;

 }

在文本框上使用：

<input type="email" onblur="emailVal(this)">

现在，如果emailVal（）返回false，请在文本框周围做一个红色边框。