メールの検証（javascript）

さまざまな方法で電子メールを検証することができます。 最も簡単なのは、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

WordPress KBoardで応用：

上記のJavaScript関数を使用して WordPress 掲示板プラグイン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;
}

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