Question

我想知道是否有可能强制输入字段成为有效的电子邮件？

<input type="text" name="emailaddress" >

我希望它尽可能使用 Javascript / JQuery而不是PHP ！

感谢您的帮助。

Answer 1

仅支持较新的浏览器？试试这个：

<input type="email" name="emailaddress">

请注意，支持有些限制，但如果它属于这些浏览器，则可能对您有用：

http://caniuse.com/#feat=forms

在相关说明中：

Validate email address in JavaScript?

Answer 2

function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

Answer 3

您可以使用@Mike Robinson给出的答案以及一些简单的验证（found here）作为旧浏览器的后备：

HTML：

<input type="email" name="emailaddress" id="valid_email"><div class="validate">Please enter a valid email!</div>

JS：

$('.validate').hide();
$('body').on('blur', '#valid_email', function() {
    $('.validate').hide();
    if(!isValidEmailAddress($(this).val())) {
       $('.validate').show();
    }
});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/i);
    return pattern.test(emailAddress);
};

Fiddle

或者，甚至更简单，您只需使用jQuery Validation Plugin。

您还需要在后端验证，可以使用PHP filters执行此操作：

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    // do something if email is valid
}

Answer 4

JavaScript无法知道电子邮件是否有效。（至少不容易）要在Dynamic Fashion中执行此操作，您只能使用PHP选项。在Javascript中，您只能使用Ajax通过事件来调用它。

修改防止误会

是的，您可以使用RegEx，有点使用JS。但是你只能得到一个客户端解决方案。浏览器相关测试也不是真正的解决方案。输入的验证是关于获得正确和安全的输入。您只能使用PHP框架阻止用户发送错误的数据。或者至少，你使用一些非常花哨的（我认为昂贵的）js框架，这可能会保护你。

如果我只是关闭Javascript并使用旧浏览器，那么请避免验证。使用HTML5和JavaScript进行验证仅适用于Usabillity。不是为了安全！

强制文本字段是有效的电子邮件？

4 个答案: