js表单验证,js验证邮箱,js验证手机号_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

一个简单的注册页面 js 表单验证，单选框采用图片做的，在点击“提交信息”按钮的时候，弹出对话框，提示错误。对话框也是用html写的，而非alert。当点击“获取验证码”的时候，会首先检测手机号码填写是否正确，如果不正确，会提示错误。如果填写正确，会显示倒计时。直到倒计时结束，才能再次获取验证码。当然，由于是本地的，不可能真的发送信息到手机号码。仅供参考，简单的不行了：

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>js表单验证,js验证邮箱,js验证手机号 - 我爱模板网 www.5imoban.net</title> <style> /*重置样式*/ body,ul,ol,li,p,table,tr,td,h1,h2,h3,h4,h5,h6{margin:0; padding:0;} body{font-family:"微软雅黑"; font-size:14px;} a{text-decoration:none;} img{border:0 none;} /*表单*/ .register{width:80%; margin:auto;} .register h3{padding-top:15px; padding-left:100px; font-size:16px;} .register .shiyong{padding-top:30px; padding-bottom:25px;} .register .ml{margin-left:200px;} .register .ml2{margin-left:30px;} .register i{display:inline-block; vertical-align:middle; background:url(http://www.5imoban.net/view/demoimg/radius1.png) no-repeat left center; padding-left:20px; height:15px; line-height:15px; font-style:normal; cursor:default;} .register i.checked{background-image:url(http://www.5imoban.net/view/demoimg/radius1_on.png);} .register .shiyong input,.register .dwlx input{display:none;} .item{margin-top:15px; position:relative;} .item input[type=text],.item input[type=password]{width:210px; height:27px; line-height:20px; border:1px solid #787878; vertical-align:middle;} .item input[type=text]:focus,.item input[type=password]:focus{box-shadow:0 0 3px 0 rgba(0,0,0,.3);} .item span{border:1px solid #fff; height:27px; line-height:27px; vertical-align:middle; cursor:default; width:70px; display:inline-block;} .tips{font-size:12px; padding-top:15px; color:#999; padding-left:70px;} .item.yzm input[type=text]{width:95px;} .yzm a{display:inline-block; padding:5px; background:#cdcecd; font-size:12px; color:#0866fe; position:absolute; left:190px; top:-8px; cursor:pointer;} .yzm mark{position:absolute; left:175px; top:12px;} .btn{height:40px; background:#D7D7D7; text-align:center; line-height:40px; border:none; cursor:pointer; margin-left:70px;} [type=submit].btn{width:185px; margin-top:15px;} /*弹窗*/ .msgBg{position:absolute; width:100%; height:100%; background:rgba(0,0,0,.5); top:0; left:0; z-index:9999; display:none;} .msgBox{width:400px; box-sizing:border-box; padding:20px; height:300px; background:#fff; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; border:1px solid rgba(0,0,0,.3); border-radius:4px; box-shadow:1px 1px 3px rgba(0,0,0,.3); cursor:move;} .msgBox:active{background:rgba(255,255,255,.8);} .closeMsg{display:block; width:30px; height:30px; font-size:20px; cursor:pointer; border-radius:9999px; line-height:30px; text-align:center; border:1px solid rgba(0,0,0,.3); right:-15px; top:-15px; position:absolute; font-family:Arial; font-style:normal; background:#fff;} .msgBox:active .closeMsg{background:rgba(255,255,255,.8);} .msgCon p{font-size:14px; padding:5px; color:red;} </style> </head> <body> <div class="register"> <h3>请填写注册信息</h3> <form action="#" method="get"> <div class="form"> <div class="shiyong"> <i class="checked">试用</i> <input type="radio" name="r" checked> <i class="ml">购买</i> <input type="radio" name="r"> </div> <div class="item"> <span>手机号：</span><input type="text" name="phone" class="phone .j-telphone"> </div> <div class="tips">请输入手机号接收到的验证码</div> <div class="item yzm"> <span>验证码：</span><input type="text" name="yzm" class="yzm" > <input class="j-getcode code-btn btn" value="获取验证码" type="button" /> </div> <div class="item"> <span>联系人：</span><input type="text" name="lxr" class="lxr"> </div> <div class="item"> <span>邮箱地址：</span><input type="text" name="email" class="email"> </div> <div class="item"> <span>登陆账号：</span><input type="text" name="username" class="user"> </div> <div class="item"> <span>密       码：</span><input type="password" name="pwd" class="pwd"> </div> <div class="item"> <span>确认密码：</span><input type="password" name="repwd" class="repwd"> </div> <div class="item iaddress"> <span>单位地址：</span><input type="text" name="address" class="address"> </div> <div class="item dwlx"> <span>单位类型：</span> <i class="checked">药店</i> <input type="radio" name="leixing" checked> <i class="ml2">医院/诊所</i> <input type="radio" name="leixing"> <i class="ml2">健康管理公司</i> <input type="radio" name="leixing"> </div> <input type="submit" value="提交信息" class="btn"> </div> </form> </div> <div class="msgBg"> <div class="msgBox"> <i class="closeMsg">X</i> <div class="msgCon"></div> </div> </div> <br><br><br> <script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script> $(function(){ $(".register .shiyong i,.register .dwlx i").click(function(){ $(this).addClass("checked").next().attr("checked","checked"); $(this).siblings("i").removeClass("checked").next().removeAttr("checked"); }) $(".item span").click(function(){ $(this).next().focus(); }) //表单验证 $(".register form").submit(function(){ var _html = ""; var flag = true; //手机号 var phone = $(".phone").val(); if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phone))){ _html += "<p>手机号码格式不正确，请输入11位手机号！</p>"; flag = false; } //联系人 var lxr = $(".lxr").val(); if(lxr.length == 0){ _html += "<p>联系人没有填写！</p>"; flag = false; } //邮箱 var email = $(".email").val(); if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email))){ _html += "<p>邮箱格式填写不正确！</p>"; flag = false; } //登陆账号 var user = $(".user").val(); if(user.length == 0){ _html += "<p>登陆账号没有填写！</p>"; flag = false; } //登陆密码 var pwd = $(".pwd").val(); if(pwd.length == 0){ _html += "<p>密码没有填写！</p>"; flag = false; } //重复密码 var repwd = $(".repwd").val(); if(pwd != repwd){ _html += "<p>两次输入的密码不一致！</p>"; flag = false; } if(flag == false){ $(".msgCon").append(_html); $(".msgBg").fadeIn(); return flag; } }) $(".closeMsg").click(function(){ $(".msgCon").html(""); $(".msgBg").fadeOut(); }) //获取验证码 $(".register .code-btn").click(function(){ if($(this).attr("disabled") != "disabled"){ var phone = $(".phone").val(); if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(phone))){ $("input.yzm").after("<mark>手机号码格式不正确</mark>"); setTimeout(function(){$("mark").fadeOut()},1000); }else{ var i=99; $(".register .code-btn").val("请在100秒内输入验证码").attr("disabled","disabled"); var inerval = setInterval(function(){ $(".register .code-btn").val("请在"+i+"秒内输入验证码"); if(i==0){ $(".register .code-btn").val("获取验证码").removeAttr("disabled"); clearInterval(inerval); } i--; },1000) } } }) }) </script> </body> </html>
提示：您可以先修改部分代码再运行