jQuery 開發(fā)登入教程之jquery驗(yàn)證
第一節(jié)我們講到了使用jquery開發(fā)表單驗(yàn)證步驟，也就是流程圖，頁面的佈局與css這兩個(gè)塊我們都已經(jīng)完成了
接下來就是引入jquery的文件與編寫jquery的程式碼了
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
註：如果你的jquery.js檔案與form.html的檔案不在同一個(gè)目錄下，需要注意寫正確的路徑
面我們來看一下，我們需要驗(yàn)證表單的使用者名稱和密碼
如果沒有填寫，然後我們就點(diǎn)登陸了，這樣是錯(cuò)誤的，所以我們給一個(gè)提示信息
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
</script>大家看如上代碼，我們獲得用戶名的文本框的內(nèi)容，如果是空，我們將在第一個(gè)span 標(biāo)籤中加入提示文字，如果不為空，則span 內(nèi)容是沒有內(nèi)容的
當(dāng)我們沒有輸入內(nèi)容點(diǎn)擊按鈕登入了，然後span 標(biāo)籤也是會(huì)有提示訊息，當(dāng)我在文字方塊中輸入內(nèi)容，輸入完成後，點(diǎn)擊頁面其他地方，span 標(biāo)籤的提示文字將會(huì)沒有
這時(shí)我們就觸發(fā)了一個(gè)改變事件，代碼如下：
<script>
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
</script>到此，我們一個(gè)登入頁面的簡單驗(yàn)證就完成了
下面我把完整程式碼貼出來
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面的驗(yàn)證</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="請(qǐng)輸入用戶名" id="name"></br>
<span id="sp1"></span></br></br>
密 碼：<input type="password" placeholder="請(qǐng)輸入密碼" 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("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
</script>
</body>
</html>
