HTML DOM 入力メール pattern プロパティの使い方とサンプルコード解説
HTML DOM の Input Email pattern プロパティは、メールアドレス入力フィールド（<input type="email">）に対応する正規表現を設定・取得するためのプロパティです。pattern 属性の値は、メールフィールドに入力されたテキストの検証に使用され、入力内容がパターンに一致しない場合はフォーム送信時にエラーが表示されます。独自の入力ルールを適用したい場合にとても便利な機能です。
構文
基本的な構文は以下のとおりです。
正規表現（パターン）を取得する場合
inputEmailObject.pattern
正規表現（パターン）を設定する場合
inputEmailObject.pattern = 'RegExp'
サンプルコード
それでは、Input Email pattern プロパティの具体的な使用例を見てみましょう。以下の例では、あらかじめ設定されたパターンを取得して画面に表示し、フォーム送信時には入力されたメールアドレスのユーザー名部分を取り出して、アラートで歓迎メッセージを表示します。
<!DOCTYPE html>
<html>
<head>
<title>Input Email pattern</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="submit"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form onsubmit="checkPattern()">
<fieldset>
<legend>Email-pattern</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" pattern="[a-zA-z0-9]+@+MNC.com" title="[a-zA-z0-9]+@+MNC.com">
</label>
<input type="submit" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'pattern: '+inputEmail.pattern;
function checkPattern() {
if(inputEmail.value !== ''){
var User = inputEmail.value.split("@")[0];
alert("Welcome "+User);
}
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のように動作します。
「Submit」ボタンをクリックする前
無効なパターンのメールアドレスを入力して「Submit」ボタンをクリックした後
有効なパターンのメールアドレスを入力して「Submit」ボタンをクリックした後
-
HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text patternプロパティは、テキスト入力フィールドのpattern属性を設定または取得するために使用されます。このプロパティを利用することで、pattern属性に指定した正規表現に基づいて、ユーザーが入力したテキストが妥当な形式かどうかを自動的に検証できます。 構文 patternプロパティの基本構文は以下の通りです。 patternプロパティの設定： textObject.pattern = regexp ここで「regexp」は、テキストフィールドの入力値を検証するための正規表現です。正規表現を指定することで、特定の文字数や文字種（数字のみ、アルファ
-
HTML DOM パスワード入力の pattern プロパティとは？使い方とサンプルコードを解説
pattern プロパティとはHTML DOM の Input Password（パスワード入力）オブジェクトが持つ pattern プロパティは、パスワード入力フィールドの pattern 属性を取得または設定するために使用されます。pattern 属性には正規表現を指定でき、ブラウザはその正規表現に基づいて入力されたパスワードの形式を自動的に検証します。これにより、サーバー側へ送信する前にクライアント側で入力チェックを行うことが可能になります。構文pattern プロパティを設定する場合の構文は以下のとおりです。passwordObject.pattern = regexpここで rege