以下是 原生js带提示留言表单验证代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js带提示留言表单验证代码</title>
<style>
*{margin:0px;padding:0px;}
body{background-color:#f9f9f9;}
.clears{ clear:both;}
/*messages*/
.messages{padding:15px 0;}
.messages input,.messages select,.messages textarea{margin:0;padding:0; background:none; border:0; font-family:"Microsoft Yahei";}
.messlist {height:30px;margin-bottom:10px;}
.messlist label{float:left;width:100px; height:30px; font-size:14px; line-height:30px; text-align:right;padding-right:10px;}
.messlist input{float:left;width:300px;height:28px;padding-left:5px;border:#ccc 1px solid;}
.messlist.textareas{ height:auto;}
.messlist textarea{float:left;width:400px; height:110px;padding:5px;border:#ccc 1px solid;}
.messlist.yzms input{width:100px;}
.messlist.yzms .yzmimg{ float:left;margin-left:10px;}
.messsub{padding:0px 0 0 110px;}
.messsub input{width:100px; height:35px; background:#ddd; font-size:14px; font-weight:bold; cursor:pointer;margin-right:5px}
.messsub input:hover{ background:#f60;color:#fff;}
#label0{display:none;color:#0aa770;height:28px;line-height:28px;}
#label1{display:none;color:#0aa770;height:28px;line-height:28px;}
#label2{display:none;color:#0aa770;height:28px;line-height:28px;}
#label3{display:none;color:#0aa770;height:28px;line-height:28px;}
#label4{display:none;color:#0aa770;height:28px;line-height:28px;}
#label5{display:none;color:#0aa770;height:28px;line-height:28px;}
#label6{display:none;color:#0aa770;height:28px;line-height:28px;}
#label7{display:none;color:#0aa770;height:28px;line-height:28px;}
#label8{display:none;color:#0aa770;height:48px;line-height:48px;}
#label9{display:none;color:#0aa770;height:48px;line-height:48px;}
#label10{display:none;color:#0aa770;height:48px;line-height:48px;}
</style>
</head>
<body>
<br>
<div class="mail">
<div class="send">
<div class="sendbox">
<form action="#" method="get" class="messages">
<div class="messlist">
<label>姓名</label>
<input type="text" placeholder="姓名" id="input1" onblur="jieshou()">
<div id ="label0">*你还没填写名字呢!</div>
<div id ="label1">√正确</div>
<div id ="label2">×错误</div>
<div class="clears"></div>
</div>
<div class="messlist">
<label>电子邮件</label>
<input type="text" placeholder="电子邮件" id="input2" onblur="mailtext()">
<div id ="label3">√正确</div>
<div id ="label4">×邮箱地址错误</div>
<div id ="label5">*必填</div>
<div class="clears"></div>
</div>
<div class="messlist">
<label>手机号</label>
<input type="text" placeholder="手机号" id="input3" onblur="phonetext()">
<div id ="label6">√正确</div>
<div id ="label7">×手机号码错误</div>
<div class="clears"></div>
</div>
<div class="messlist textareas">
<label>留言内容</label>
<textarea placeholder="说点什么吧..." id="input4" onblur="content()"></textarea>
<div id ="label8">√</div>
<div id ="label9">×</div>
<div id ="label10">* 必填</div>
<div class="clears"></div>
</div>
<div class="messlist yzms">
<label>验证码</label>
<input type="text" placeholder="验证码" id="input5" />
<img src="images/yzm.jpg" width="64" height="27" class="yzmimg" />
<div class="clears"></div>
</div>
<div class="messsub">
<input type="submit" value="提交" onclick="send()"style="background:#00a3eb;color:#fff;" />
<input type="reset" value="重填" />
</div>
</form>
<script>
function send(){
var name = document.getElementById("input1").value;
var mail = document.getElementById("input2").value;
var phone = document.getElementById("input3").value;
var content = document.getElementById("input4").value;
var code = document.getElementById("input5").value;
if(name=="")
{
label2.style.display = 'none';
label1.style.display = 'none';
label0.style.display = 'block';;
return false;
}
if(mail=="")
{
label3.style.display = 'none';
label4.style.display = 'none';
label5.style.display = 'block';;
return false;
}
if(content=="")
{
label8.style.display = 'none';
label9.style.display = 'none';
label10.style.display = 'block'; //*必填
return false;
}
if(code=="")
{
alert('请填写验证码！');
return false;
}
else{
alert('信息已发送到站长邮箱，感谢您的支持！');
}
}
</script>
<script>
function jieshou(){
var label1 = document.getElementById("label1");
var label2 = document.getElementById("label2");
var nametext = document.getElementById("input1").value;
if(nametext!=""){
label0.style.display = 'none';
label1.style.display = 'block';
label2.style.display = 'none';
}
else{
label0.style.display = 'block';
label1.style.display = 'none';
label2.style.display = 'none';
}
}
</script>
<script>
function mailtext(){
var mailvalue = document.getElementById("input2").value;
var mailtext = document.getElementById("input2");
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(mailvalue!=""){ //邮箱如果非空 显示正确
label5.style.display = 'none';
label3.style.display = 'block';//显示正确
label4.style.display = 'none';
}
else{
label5.style.display = 'block';//显示*必填
label3.style.display = 'none';
label4.style.display = 'none';
return false;
}
//上面为一段
if(!myreg.test(mailvalue)){ //既而 正则表达式 验证邮箱 如果不是邮箱地址label4显示出来
label3.style.display = 'none';
label4.style.display = 'block'; //*邮箱地址错误
return false;
}
else{
label3.style.display = 'block';
label5.style.display = 'none';
label4.style.display = 'none';
}
//上面为一段
}
</script>
<script>
function phonetext(){
var phonetext = document.getElementById("input3").value;
if(!(/^1[3|4|5|7|8]\d{9}$/.test(phonetext))){
label6.style.display = 'none';
label7.style.display = 'block'; //*手机号码错误
return false;
}
else{
label6.style.display = 'block';
label7.style.display = 'none';
}
}
</script>
</script>
<script>
function content(){
var content = document.getElementById("input4").value;
if(content!=""){
label8.style.display = 'block';
label9.style.display = 'none';
label10.style.display = 'none'; //*必填
return false;
}
else{
label8.style.display = 'none';
label9.style.display = 'none';
label10.style.display = 'block';
}
}
</script>
</div>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
