ユーザー登録のバリデーション
パスワードは確認のために二回入力させる。
新規ユーザー登録で、登録できないときはエラーを表示する。
- すでに登録済みのユーザー名の場合
- パスワードが不一致の場合
以下のコードでパスワードの不一致のエラーを表示できる。
ただし、登録ボタンを押せるので、登録はできてしまう。
不一致のときは、登録ボタンを押せないようにする必要がある。
newuser.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>新規ユーザー登録</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style type="text/css">
.err {
background: #ff8080;
}
</style>
<script type="text/javascript">
$(function() {
$('[type=password]').on('change', function() {
var p1 = $('[name=password]').val();
var p2 = $('[name=password2]').val();
if (p1 != p2) {
$('div.err').text('パスワードが一致していません。');
} else {
$('div.err').text('');
}
});
})
</script>
<body>
<h1>新規ユーザー登録</h1>
<form th:action="@{/newuser}" method="post">
<div><label>ユーザ名: <input type="text" name="username"/> </label></div>
<div><label>パスワード: <input type="password" name="password"/> </label></div>
<div><label>パスワード再入力: <input type="password" name="password2"/> </label></div>
<div class="err"></div>
<div><input type="submit" value="登録"/></div>
</form>
<a href="/">戻る</a>
</body>
</html>
ユーザーをデータベースに登録するときのエラー
データベース登録時のエラーはサーバーサイドでチェックする。
package jp.abc;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.User.UserBuilder;
import org.springframework.security.provisioning.JdbcUserDetailsManager;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class MyController {
@Autowired
private JdbcUserDetailsManager userManager;
@RequestMapping(value = "/")
public String index() {
return "index";
}
@RequestMapping(value = "/login")
public String login() {
return "login";
}
@RequestMapping(value = "/newuser", method = RequestMethod.GET)
public String newuser() {
return "newuser";
}
@RequestMapping(value = "/newuser", method = RequestMethod.POST)
public String register(@RequestParam("username") String username,
@RequestParam("password") String password,
HttpServletRequest req) {
UserBuilder users = User.withDefaultPasswordEncoder();
try {
userManager.createUser(users.username(username).password(password).roles("USER").build());
} catch (Exception e) {
req.setAttribute("msg", "その名前は登録できません。");
return "newuser";
}
return "login";
}
@RequestMapping(value = "/mypage")
public String top() {
return "mypage";
}
}
HTMLテンプレートにエラーメッセージを表示するコードを追加する。
<body>
<h1>新規ユーザー登録</h1>
<form th:action="@{/newuser}" method="post">
<div><label>ユーザ名: <input type="text" name="username"/> </label></div>
<div><label>パスワード: <input type="password" name="password"/> </label></div>
<div><label>パスワード再入力: <input type="password" name="password2"/> </label></div>
<div class="err" th:text="${msg}"></div>
<div><input type="submit" value="登録"/></div>
</form>
<a href="/">戻る</a>
</body>
パスワードの1文字を入力するたびに不一致のエラーを表示する。
newuser.html
<script type="text/javascript">
$(function() {
$('[type=password]').on('keyup', function() {
var p1 = $('[name=password]').val();
var p2 = $('[name=password2]').val();
if (p1 != p2) {
$('div.err').text('パスワードが一致していません。');
} else {
$('div.err').text('');
}
});
})
パスワード不一致
パスワードの不一致の場合や、ユーザー名が空欄のときは登録ボタンを押せないようにする。
<script type="text/javascript">
$(function() {
$('[type=password]').on('keyup', function() {
var p1 = $('[name=password]').val();
var p2 = $('[name=password2]').val();
if (p1 != p2) {
$('div.err').text('パスワードが一致していません。');
$('[type=submit]').attr('disabled', true);
} else {
$('div.err').text('');
var name = $('[name=username]').val();
if (name != '') {
$('[type=submit]').attr('disabled', false);
}
}
});
})
</script>
パスワードが一致しているときにユーザー名を入力しても登録ボタンを押せないままなので、そこを改善する。
newuser.html
<script type="text/javascript">
$(function() {
$('[type=submit]').attr('disabled', true);
$('[name=username]').on('keyup', function() {
checkFields();
});
$('[type=password]').on('keyup', function() {
checkFields();
});
});
function checkFields() {
var name = $('[name=username]').val();
if (name.length == 0) {
$('[type=submit]').attr('disabled', true);
$('div.err').text('ユーザー名を入力してください。');
return;
}
var p1 = $('[name=password]').val();
var p2 = $('[name=password2]').val();
if (p1 != p2) {
$('div.err').text('パスワードが一致していません。');
$('[type=submit]').attr('disabled', true);
return;
}
$('div.err').text('');
$('[type=submit]').attr('disabled', false);
}
</script>