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です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA