jQuery開発ログインチュートリアル jQuery検証
最初のセクションでは、jquery を使用してフォーム検証を開発する手順、つまりフローチャート、ページ レイアウト、CSS について説明しました。両方とも完了しました
次のステップは、jquery ファイルの導入と jquery の記述です。 code
< ;script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
注: jquery.js ファイルがform.html ファイルが同じディレクトリにない場合は、正しいパスを記述するように注意する必要があります
フォームのユーザー名とパスワードを確認する必要があります
。これは間違っているので、プロンプト メッセージを表示します
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>上のコードを見て、ユーザー名のテキスト ボックスの内容を取得します。それが空の場合は、最初のspanタグにプロンプトテキストを入力します。空でない場合、spanコンテンツにはコンテンツがありません。
コンテンツを入力せずにログインするボタンをクリックすると、spanタグにもプロンプトメッセージが表示されます。テキスト ボックスに入力し、入力が完了した後、ページの他の場所をクリックすると、Span タグのプロンプト テキストは表示されません
変更イベントをトリガーしたときのコードは次のとおりです:
<script>
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>この時点で、ログインページの簡単な検証が完了しました
以下に完全なコードを投稿します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面的验证</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#bdy{width:100%;height:950px;background:#999;}
#dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
#con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;}
#but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书";
font-size:18px;}
#but:hover{background:#f66;}
span{margin-left:80px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="bdy">
<div id="dv">
<div id="con">
<form method="post" action="#">
用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
<span id="sp1"></span></br></br>
密 码：<input type="password" placeholder="请输入密码" id="pwd"></br>
<span id="sp2"></span></br></br>
<input type="button" value="登 录" id="but">
</form>
</div>
</div>
</div>
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>
</body>
</html>
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面的验证</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#bdy{width:100%;height:950px;background:#999;}
#dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
#con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;}
#but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书";
font-size:18px;}
#but:hover{background:#f66;}
span{margin-left:80px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="bdy">
<div id="dv">
<div id="con">
<form method="post" action="#">
用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
<span id="sp1"></span></br></br>
密 码：<input type="password" placeholder="请输入密码" id="pwd"></br>
<span id="sp2"></span></br></br>
<input type="button" value="登 录" id="but">
</form>
</div>
</div>
</div>
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
