JS development verification form tutorial - verification form (5)
We also talked about the verification of text fields before
In the previous section, we talked about the verification of username, password and email address being triggered by clicking the registration button
I will use different methods below. Verify text field
When we enter text in the text field, when there are too many characters entered, we will give a prompt message. There is no need to click the registration button to prompt
In this way we verify the text The field must be written in the keyboard event. The code is as follows:
document.getElementById('txt').onkeyup=function(){
? ? ? ? var leng = document.getElementById('txt'). value.length;
?????????????????????????????????????????????????????????????????????????????????????????document.getElementById(' sp3').innerHTML = "";
Within 20, there is no prompt message
The complete code is as follows:
<!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;
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ā)鍵盤事件，提示信息去除
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(){
var leng = document.getElementById('txt').value.length;
if(leng>20){
document.getElementById("sp3").innerHTML = "已超過最大內(nèi)容！";
}else{
document.getElementById('sp3').innerHTML = " ";
}
}
</script>
</body>
</html> 
