目次
「空白だったら」、「@が含まれてなかったら」を判定する
See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
</head>
<body>
<input type="text" placeholder="メールアドレス">
<div class="error"></div>
</body>
</html>
JQuery
$(function(){
$('.error').hide();
$('input').on('blur',function(){
if($(this).val() == ""){
$('.error').text("メールアドレスを入力してください").show();
}else{
if($('input').val().indexOf("@") > -1){
$('.error').hide();
}else{
$('.error').text("このメールアドレスは正しくありません").show();
}
}
})
});
解説
- 2行目、初期状態の .error のメッセージを隠す
- 3行目、input からカーソルが離れた時( bulr )、4行目の if が作動する
- 4行目、$(this) = カーソルが離れた input、の value が空白なら 5行目のコードが作動する
- 5行目、.error に .text() のメッセージを挿入し、表示( .show() )する
- 6行目、else = if に対して「そうでない場合」、今回は「input が空白でない場合」7行目のコードが作動する
- 7行目、input の value に”@”が含まれているか判定する
- indexOf() = カッコないの文字が含まれていれば 0 、含まれていなければ -1 の値を返す
- 8行目、”@” が含まれていれば .error のメッセージを隠す
- 10行目、含まれていなければ、.error に .text() のメッセージを代入して表示する
