原生js有提示表单验证代码.zip资源-CSDN文库

共2个文件

jpg：1个

html：1个

版权申诉

js代码

CSS3

html5

113 浏览量 2024-11-23 13:44:23 上传评论收藏 8KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

原生js有提示表单验证代码.zip （2个子文件）

index.html 7KB

images

yzm.jpg 6KB

<!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> </div> <body> <html>

评论收藏

内容反馈

版权申诉