よくパスワード変更画面でパスワードを変更する時に、パスワード入力項目と、パスワード確認項目がある画面があります。
その時にHTML5のAPI機能を使ったパスワードの2重確認の実装方法をメモとして記載したいと思います。
目次
- 前提条件
- 実装方法
- 実行結果
- 参考文献
前提条件
- HTML5
- jQuery 1.9.1
- firefox
実装方法
HTML5の制約バリデーションAPIの一つ「setCustomValidity()」を使って実装します。setCustomValidityとは
element.setCustomValidity(data)とは、独自のエラーをセットでき、セットされるとelementがバリデートに失敗します。dataの中にバリデートのメッセージが指定でき、引数が空文字だと独自エラーがリセットされます。
実装サンプル
新しいパスワードと古いパスワードを入力して、新しいパスワードと古いパスワードが不一致で且つ、新しいパスワードと確認用パスワードが一致していた場合submitが出来るサンプルを以下に記載します。<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $newPassword = $("input[name='newPassword']"),
$oldPassword = $("input[name='oldPassword']"),
$confirmPassword = $("input[name=confirmPassword]"),
confirmPasswordCheck = function(data) {
var pass = $newPassword.val(),
confirmPass = $confirmPassword.val();
if (pass != confirmPass) {
$confirmPassword[0].setCustomValidity("パスワードと確認用パスワードが一致しません。");
} else {
$confirmPassword[0].setCustomValidity("");
}
},
newPasswordCheck = function() {
var pass = $oldPassword.val(),
newPass = $newPassword.val();
if (pass == newPass) {
$newPassword[0].setCustomValidity("新しいパスワードと古いパスワードが一致しています。");
} else {
$newPassword[0].setCustomValidity("");
}
};
$newPassword[0].oninput = function() {
newPasswordCheck();
confirmPasswordCheck();
};
$oldPassword[0].oninput = function() {
newPasswordCheck();
};
$confirmPassword[0].oninput = function () {
confirmPasswordCheck();
};
});
</script>
<base target="_self">
</head>
<body>
<form>
<table >
<tbody>
<tr>
<td><label>古いパスワード</label></td>
<td>：</td>
<td>
<input type="password"
name="oldPassword"
maxlength=6
required />
</td>
</tr>
<tr>
<td><label>新しいパスワード</label></td>
<td>：</td>
<td>
<input type="password"
name="newPassword"
maxlength=6
required />
</td>
</tr>
<tr>
<td><label>確認用パスワード</label></td>
<td>：</td>
<td>
<input type="password"
name="confirmPassword"
maxlength=6
required />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="変更" />
</form>
</body>
</html>
実行結果
実行結果は以下のようになります。
0 コメント:
コメントを投稿