Tutorial borang pengesahan pembangunan JS - borang pengesahan (5)
Kami juga bercakap tentang pengesahan medan teks sebelum ini
Dalam bahagian sebelumnya kita bercakap tentang bagaimana pengesahan nama pengguna, kata laluan dan e-mel dicetuskan dengan mengklik butang pendaftaran
Saya menggunakan kaedah yang berbeza di bawah. Sahkan medan teks
Apabila kami memasukkan teks dalam medan teks, apabila terdapat terlalu banyak aksara yang dimasukkan, kami akan memberikan mesej segera. Tidak perlu mengklik butang pendaftaran untuk menggesa
Dengan cara ini kami mengesahkan teks Medan mesti ditulis dalam acara papan kekunci Kod adalah seperti berikut:
document.getElementById('txt').onkeyup=function(){
var leng = document.getElementById('txt'). value.length;
if(leng>20){
document.getElementById("sp3").innerHTML = "Kandungan maksimum melebihi!";
}lain{
document.getElementById(' sp3').innerHTML = " ";
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ?
>
<!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;
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 = "格式不正確！";
}
//驗(yàn)證密碼是否為空，為空則給出提示信息
var rel = /^[A-Za-z0-9]{6,10}$/;
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "請(qǐng)輸入密碼！";
}else if(!rel.test(val1)){
document.getElementById("sp1").innerHTML = "密碼不符合規(guī)范！";
}
//驗(yàn)證郵箱是否為空和郵箱的格式是否正確
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "請(qǐng)輸入郵箱！";
}else if(!reg.test(val2)){
document.getElementById("sp2").innerHTML = "郵箱格式不正確！";
}
//驗(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(){
var leng = document.getElementById('txt').value.length;
if(leng>20){
document.getElementById("sp3").innerHTML = "已超過(guò)最大內(nèi)容！";
}else{
document.getElementById('sp3').innerHTML = " ";
}
}
</script>
</body>
</html>
