Question

当用户在我的输入字段中输入他的电子邮件地址时，我希望能够为自己触发电子邮件地址。输入电子邮件地址后，会在该字段中添加一个附加类。 e.g。

未输入电子邮件地址：

<input class="simpleinput">

输入的电子邮件地址：

<input class="simpleinput emailok">

你能帮帮忙吗？非常感谢提前

Answer 1

添加onBlur()事件，然后针对电子邮件测试正则表达式/^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i。如果匹配则添加一个类。

否则，当测试条件成功时，您可以直接添加一个电话来触发电子邮件。

JQUERY解决方案

$(function(){
    $('.simpleinput').on('blur', function(){
        var valueToTest = $(this).val()
        var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (testEmail.test(valueToTest)){
            alert('ok');
            $(this).addClass('emailOk');
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="simpleinput" type="email">

JS解决方案

var ele = document.querySelector('.simpleinput');
ele.addEventListener('blur', function(){

 var valueToTest = this.value
        var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
        if (testEmail.test(valueToTest)){
            alert('ok');
           this.className += emailok;
        }

})

<input class="simpleinput" type="email">

Answer 2

我知道您希望在将电子邮件放入字段时添加课程。

var field = document.getElementsByClassName('simpleinput')[0];
field.addEventListener('blur', function(){
    if (field.value.length > 0) {
        field.classList.add('emailok');
    }
});

这会向您的字段目标添加模糊事件，并添加您想要的类。

用户输入电子邮件地址时自动发送电子邮件

2 个答案: