亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

JS開発検証フォームチュートリアル - 検証フォーム(2)

前のセクションで説明したように、フォームのコンテンツが空かどうかを確認(rèn)し、空の場合はプロンプト メッセージを表示します

次に、フォームのテキスト ボックスにコンテンツを入力するときにプロンプ??ト メッセージを削除する方法を見てみましょう。またはテキストフィールド

まず第一に、テキストボックスの入力內(nèi)容について考えてみましょう。次のようにキーボードイベント

のコードをトリガーします:

// ユーザー名のテキストボックスがキーボードイベントをトリガーすると、プロンプトが表示されます削除する情報(bào)
Document.GetelementByid ('name').T document.GetelementByid ('SP'). Innerhtml = "" ";
}

// パスワード ボックスがキーボード イベントをトリガーすると、情報(bào)を求めるプロンプトが表示されます。
document.GetelementByid ('pwd').getElementById('sp1').innerHTML = " ";
( 'sp2') // キーボードイベントがトリガーされたとき。テキスト ドメインの場合、

document.GetelementByid ('txt'). ('SP3' ).innerHTML = " ";
}

完全なコードは次のとおりです。

學(xué)び続ける
||
<!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>愛 好:</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ā)鍵盤事件,提示信息去除 document.getElementById('name').onkeyup=function(){ document.getElementById('sp').innerHTML = " "; } //當(dāng)密碼框觸發(fā)鍵盤事件,提示信息去除 document.getElementById('pwd').onkeyup=function(){ document.getElementById('sp1').innerHTML = " "; } //當(dāng)郵箱文本框觸發(fā)鍵盤事件,提示信息去除 document.getElementById('email').onkeyup=function(){ document.getElementById('sp2').innerHTML = " "; } //當(dāng)文本域觸發(fā)鍵盤事件,提示信息去除 document.getElementById('txt').onkeyup=function(){ document.getElementById('sp3').innerHTML = " "; } </script> </body> </html>
提出するリセットコード