ユーザーが入力フィールドに電子メールアドレスを入力するとすぐに自分自身に電子メールアドレスをトリガーするものがあります。電子メールアドレスが入力されるとすぐに、追加のクラスがフィールドに追加されます。例えばユーザーが電子メールアドレスを入力したときに電子メールを自動的に送信
んが、電子メールアドレスが入力されていない：
<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をチェックする代わりにregex（電子メールバリデーター）を使う方が良いです。 – ADarnal
これは単なる例です。 –
私はあなたが求めていることをよく理解していません。電子メールを送信するか、CSSを入力フィールドに追加しますか？ –
これまでに試したことはありますか？コードを更新してください。 – ADarnal
ユーザーがテキストボックスに有効なemailIdを入力したときに、電子メールIDに電子メールを送信しますか？ –