当用户输入电子邮件地址时自动发送电子邮件
只要用户在我的输入字段中输入他的电子邮件地址,我就想让自己触发电子邮件地址。只要输入电子邮件地址,就会在该字段中添加一个额外的类。例如当用户输入电子邮件地址时自动发送电子邮件
没有输入的电子邮件地址:
<input class="simpleinput">
输入的电子邮件地址:
<input class="simpleinput emailok">
你能帮忙吗? 多谢提前
添加一个onBlur()
事件,然后测试正则表达式/^[A-Z0-9._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i
的电子邮件。如果匹配,则添加一个类。
或者,当测试条件成功时,您可以直接添加一个调用来触发电子邮件。
JQUERY溶液
$(function(){
$('.simpleinput').on('blur', function(){
var valueToTest = $(this).val()
var testEmail = /^[A-Z0-9._%+-][email protected]([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._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(valueToTest)){
alert('ok');
this.className += emailok;
}
})
<input class="simpleinput" type="email">
问题标签中没有提到'Jquery',所以我们不知道OP是否在使用它。 –
@Reddy你是对的,但这也是一种方式。如果其他人选择使用它。我也会更新javascript版本的编辑。感谢提醒,我没有注意到, –
@Reddy添加了一个JS解决方案 –
我知道你想添加一个类,当电子邮件被放在现场。
var field = document.getElementsByClassName('simpleinput')[0];
field.addEventListener('blur', function(){
if (field.value.length > 0) {
field.classList.add('emailok');
}
});
这将为您的字段目标添加模糊事件并添加您需要的类。
而不是检查field.value.length> 0它会更好地使用正则表达式(电子邮件验证器)。你说什么? – ADarnal
这只是一个例子。 –
我不太明白你在问什么。你想发送一个电子邮件或添加CSS到输入字段? –
你到目前为止所尝试过的?请更新您的代码。 – ADarnal
当用户在文本框中输入有效的emailId时,是否要发送电子邮件到您的电子邮件ID? –