この記事を書いた経緯
自分が独学時代にポートフォリオ作ったのはいいがバリデーションを実装していなかった。
独学でまずポートフォリオを作ろうと思うとそこまで考えられない方も多いと思う。
だからこそバリデーションを入れておくとワンランク上のポートフォリオを作れると思う。
というわけでここでは簡単なバリデーションを紹介したいと思います。
会員登録フォーム、ログインフォーム、お問い合わせフォームなど色々使い回しできるのようにしています。
HTMLの構成
ログインフォームを想定して実装しています。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="signup">
<p>
<label for="name">ニックネーム</label>
<input type="text" id="name">
</p>
<p>
<label for="email">メールアドレス</label>
<input type="email" id="email">
</p>
<p>
<label for="password">パスワード</label>
<input type="password" id="password">
</p>
<p>
<label for="confirmPassword">パスワード確認</label>
<input type="password" id="confirmPassword">
</p>
<p>
<input type="submit" value="Signup">
</p>
</form>
<script src="main.js"></script>
</body>
</html>
javaScript構成(関数定義部分）
main.js
//定数formを定義
const form = document.getElementById('signup');
//関数宣言
// 空チェック関数
// (...args) -> 可変長引数
const isValidRequiredInput = (...args) => {
let validator = true;
for (let i=0; i < args.length; i=(i+1)|0) {
if (args[i] === "") {
validator = false;
}
}
return validator
};
// ニックネームの文字数制限の関数
const isValidName = (name) =>{
if(name.length < 4){
return false
}
return true
}
// メール形式チェックの関数
const isValidEmailFormat = (email) => {
const regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
return regex.test(email)
}
// パスワード一致チェック確認の関数
const isValidPassword = (password, confirmPassword) => {
if(password !== confirmPassword){
return false
}
return true
}
javaScript構成（関数呼び出し部分)
main.js
// フォームのSignupボタン押されたら実行
form.addEventListener('submit', e => {
e.preventDefault();
// フォームの値取得
const name = form.name.value;
const email = form.email.value;
const password = form.password.value;
const confirmPassword = form.confirmPassword.value;
// 空チェック
if(!isValidRequiredInput(name, email, password, confirmPassword)){
// 値が空でないかチェック
alert('必須項目が未入力です。');
return false
}
// ニックネームの文字数制限
if(!isValidName(name)){
alert('ニックネームは4文字以上で入力ください。')
return false
}
// emailの形式チェック
if(!isValidEmailFormat(email)){
alert('メールアドレスの形式が不正です。もう1度お試しください。')
return false
}
// パスワード一致チェック
if(!isValidPassword(password, confirmPassword)){
alert('パスワードが一致しません。もう１度お試しください。')
return false
}
});
ポイント
空チェックの関数は引数を可変長引数にしています。
こうすることで今回の会員登録フォーム以外にも同じサイト内に、
ログインフォームやお問い合わせフォームなどがあり、
渡す引数の数が変わってもそのまま同じ関数を使うことができます。
わざわざフォームごとに関数定義しなくて済むので楽ですね。
main.js
// 空チェック関数
// (...args) -> 可変長引数
const isValidRequiredInput = (...args) => {
let validator = true;
for (let i=0; i < args.length; i=(i+1)|0) {
if (args[i] === "") {
validator = false;
}
}
return validator
};
//下記のように引数が変化しても呼び出し可能です。
// ログインの場合
if(!isValidRequiredInput(email, password)){
// 値が空でないかチェック
alert('必須項目が未入力です。');
return false
}
// お問い合わせの場合
if(!isValidRequiredInput(name, email, description)){
// 値が空でないかチェック
alert('必須項目が未入力です。');
return false
}