Tutorial borang pengesahan pembangunan JS - borang pengesahan (2)
Seperti yang kami nyatakan dalam bahagian sebelumnya, sahkan sama ada kandungan borang itu kosong Jika ia kosong, kami akan memberikan mesej segera
Sekarang mari lihat cara untuk mengalih keluar mesej gesaan apabila memasuki. kandungan dalam kotak teks borang atau medan teks
Pertama sekali, mari kita fikirkan kandungan input dalam kotak teks Ini akan mencetuskan acara papan kekunci.
//Apabila kotak teks nama pengguna mencetuskan acara papan kekunci, segera penyingkiran Maklumat
document.getElementById('name').onkeyup=function(){ document.getElementById('sp' ).innerHTML = " ";
}
//Apabila Kotak kata laluan mencetuskan acara papan kekunci dan maklumat gesaan dialih keluar
document.getElementById('pwd').onkeyup=function(. ){
document.getElementById('sp1').innerHTML = " "; > // Apabila kotak teks peti mel mencetuskan acara papan kekunci, maklumat gesaan mengalih keluar
Document.GetelementByid ('Emel') . Onkeyup = Fungsi () {
Document.GetelementByid ('SP2') = " “; sp3').
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
input{
outline:none;
box-sizing:border-box;padding-left:15px;}
textarea{
outline:none;resize : none;
box-sizing:border-box;padding-left:15px;padding-top:5px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.pwd{width:200px;height:30px;
margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.txt{
width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.sub{width:100px;height:30px;padding-left:0px;
border:none;
border-radius:5px;background:#ffd0ff;}
.sub:hover{background:#ffaad5;}
.div{
width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}
</style>
</head>
<body>
<div id="div">
<form>
<label>用戶名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 碼:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>郵 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>愛(ài) 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注冊(cè)" id="sub">
</form>
</div>
<script type="text/javascript">
var sub = document.getElementById('sub');
sub.onclick=function(){
//驗(yàn)證用戶名是否為空,如果為空，給出提示信息
var val = document.getElementById('name').value;
if(val == ""){
document.getElementById("sp").innerHTML = "請(qǐng)輸入用戶名！";
}
//驗(yàn)證密碼是否為空，為空則給出提示信息
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "請(qǐng)輸入密碼！";
}
//驗(yàn)證郵箱是否為空
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "請(qǐng)輸入郵箱！";
}
//驗(yàn)證內(nèi)容是否為空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "請(qǐng)輸入內(nèi)容！";
}
}
//當(dāng)用戶名的文本框觸發(fā)鍵盤(pán)事件，提示信息去除
document.getElementById('name').onkeyup=function(){
document.getElementById('sp').innerHTML = " ";
}
//當(dāng)密碼框觸發(fā)鍵盤(pán)事件，提示信息去除
document.getElementById('pwd').onkeyup=function(){
document.getElementById('sp1').innerHTML = " ";
}
//當(dāng)郵箱文本框觸發(fā)鍵盤(pán)事件，提示信息去除
document.getElementById('email').onkeyup=function(){
document.getElementById('sp2').innerHTML = " ";
}
//當(dāng)文本域觸發(fā)鍵盤(pán)事件，提示信息去除
document.getElementById('txt').onkeyup=function(){
document.getElementById('sp3').innerHTML = " ";
}
</script>
</body>
</html>
