jQueryでフォーム部品の書式をチェックする
jQueryでフォーム部品の書式をチェックします。
文字を入力したタイミングでチェックを行うので、セレクタ.change()を使います。
以下では郵便番号がxxx-xxxx形式でない場合エラーとしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- コーディング部分 -->
<script type="text/javascript">
$(function(){
$("#zip").change(function(){
// 郵便番号が変更された時の処理
if($("#zip").val().match(/^\d{3}\-\d{4}$/)){
$("#zip+span").text("")
$("#zip").removeClass("error");
}else{
$("#zip+span").text("書式が間違っています");
$("#zip").addClass("error");
}
});
});
</script>
<style>
.error{background-color:#FFCCCC;}
.alert{color:#FF0000;font-size:small;}
</style>
<!-- コーディング部分 -->
</head>
<body>
<form>
郵便番号<br>
<input type="text" name="zip" id="zip">
<span class="alert"></span>
<br><br>
<input type="submit" value="登録">
</form>
</body>
</html>DEMOです。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント