如何驗證表單中的電子郵件

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 ，請在文本框周圍使用紅色邊框。