Tutorial log masuk pembangunan jQuery pengesahan jquery
Di bahagian pertama, kami bercakap tentang langkah-langkah menggunakan jquery untuk membangunkan pengesahan borang, iaitu carta alir Kami telah melengkapkan reka letak halaman dan css
Langkah seterusnya ialah memperkenalkan fail jquery dan tulis jquery Kodnya ialah
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
Nota: Jika fail jquery.js anda tidak berada dalam direktori yang sama dengan fail form.html, anda perlu memberi perhatian untuk menulis laluan yang betul
Mari kita lihat di bawah sahkan nama pengguna dan kata laluan borang
Jika ia tidak diisi, maka kami klik untuk log masuk. Ini salah, jadi kami memberi mesej segera
<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>Lihat kod di atas , kami mendapat kandungan kotak teks nama pengguna Jika kosong, kami akan menambah teks gesaan pada teg span pertama Jika ia tidak kosong, kandungan span tidak akan mempunyai kandungan
Apabila kami klik butang untuk log masuk tanpa memasukkan kandungan, maka tag span juga akan mempunyai maklumat Prompt, apabila saya memasukkan kandungan dalam kotak teks, selepas input selesai, klik di tempat lain pada halaman, teks gesaan tag span tidak akan menjadi
Pada masa ini, kami mencetuskan peristiwa perubahan, kodnya adalah seperti berikut:
<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>Pada ketika ini, kami telah melengkapkan pengesahan mudah halaman log masuk
Saya akan siarkan kod lengkap di bawah
<!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>
