Tutorial borang pengesahan pembangunan JS - borang pengesahan (3)
Mari kita lihat perkara berikut, sahkan nama pengguna
Kami berkata sebelum ini bahawa pengesahan nama pengguna tidak boleh kosong
Sekarang mari sahkan panjang nama pengguna dan berikan nilai panjang , dalam nilai panjang, ia betul, jika ia melebihi panjang atau kurang daripada panjang, ia adalah nama pengguna yang tidak sah
Mari tulis kod di bawah:
//Sahkan sama ada nama pengguna kosong, jika Jika kosong, mesej gesaan
akan diberikan var val = document.getElementById('name').value;
var rel = document.getElementById('name') .value.length;
if(val = = "") {
}
Mula-mula kita mendapatkan panjang dan menilai panjang, iaitu kurang daripada atau sama dengan 5 atau lebih besar daripada 10. Petua
<!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="注冊" id="sub">
</form>
</div>
<script type="text/javascript">
var sub = document.getElementById('sub');
sub.onclick=function(){
//驗證用戶名是否為空,如果為空，給出提示信息
var val = document.getElementById('name').value;
var rel = document.getElementById('name').value.length;
//console.log(val.length);
if(val == ""){
document.getElementById("sp").innerHTML = "用戶名不能為空！";
}else if( rel <= 5 || rel > 10){
document.getElementById("sp").innerHTML = "格式不正確！";
}
//驗證密碼是否為空，為空則給出提示信息
var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "請輸入密碼！";
}
//驗證郵箱是否為空和郵箱的格式是否正確
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "請輸入郵箱！";
}
//驗證內(nèi)容是否為空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "請輸入內(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>Dengan cara ini , pengesahan nama pengguna kami telah selesai 
