メールの検証(javascript)

0

さまざまな方法で電子メールを検証することができます。 最も簡単なのは、HTML5に内蔵された電子メールの検証(email validation)機能を活用することです。 メールフィールドに type = "text" 代わりに type = "email"を使用します。

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

この方法は、formタグ内の位置が必要とsubmitを押し動作するなど、いくつかの制約があります。 この方法の代わりに正規表現(regular expression)を使用して、より精巧にメールの検証を行うことができます。

正規表現を利用した電子メールの検証関数:

function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
// Source: stackoverflow.com

ワードプレスKBoardで応用:

上記のJavaScript関数を使用してワードプレスの掲示板プラグインKBoardで新しいメールフィールドを追加して、電子メールの検証を行うことができます。 たとえば、次のようにeditor.phpファイルに電子メールフィールドを追加する場合:

<input type="text" placeholder="" name="kboard_option_useremail" value="<?php echo $content->option->useremail?>" id="useremail">

次のようなコードをscript.jsファイルに追加して電子メールの検証を行うことができます。

var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

var email = document.getElementById('useremail').value;
if (email == '' || !re.test($email)) {
alert("올바른 이메일 주소를 입력하세요")
return false;
}

上記のコードを使用すると、無効なメールアドレスを入力した場合は、次のように警告ウィンドウが表示されます。

Kboard email validation

コメントを残す

コメントを入力してください!
名前を入力してください