<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css/userReg.css" rel="stylesheet"> <link href=""> <style> </style> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="top-banner"><img src="img/regbanner.jpg" style="text-align: center"></div> <div class="title-line"><span class="tit">注册</span></div> <form action="" method="post"> <label>昵 称：</label><input type="text" name="userName" id="userName" value="" placeholder="请输入你的昵称" /><span class="spa spa1" ></span><br /> <label>密 码：</label><input type="text" name="password" id="password" value="" placeholder="请输入密码"/><span class="spa spa4"></span><br /> <label>确认密码：</label><input type="text" name="password" id="password1" value="" placeholder="请确认密码"/><span id="tishi"></span> <label> </label> <div> <input type="submit" value="注册" id="sub" /> <input type="submit" value="返回" id="back" /> </div> </form> <div class="title-line"></div> </div> <div class="tfoot" style="max-width:100%;"> <div class="tips">Pet store</div> <div class="cards"> <a target="_blank" href="#">帮助中心</a> </div> <div class="cards"> <a target="_blank" href="#">友情链接</a> </div> <div class="cards"> <a target="_blank" href="#">联系我们</a> </div> <div class="cards"> <a target="_blank" href="#">加入我们</a> </div> <div class="tips">传送门</div> <div class="cards"> <a target="_blank" href="#">首页</a> </div> <div class="cards"> <a target="_blank" href="#">宠物分类</a> </div> <div class="cards"> <a target="_blank" href="#">宠物用品</a> </div> <div class="cards"> <a target="_blank" href="#">画廊</a> </div> <div class="tips">合作伙伴</div> </div> <script src="js/jquery-1.12.2.min.js"></script> <script type="text/javascript"> window.onload=function(){ $("#userName").focus() } /************************ 失焦判断 **********************************/ $("input").blur(function(){ $(".spa1").css("color","#BD362F") $(".spa4").css("color","#BD362F") if($(this).is("#userName")){ //姓名判断 var na=/^[\u4E00-\u9FA5]{2,4}$/ if($("#userName").val()!=""){ if(!(na.test($("#userName").val()))){ $(".spa1").text("请输入2-4个汉字"); $(this).css("border","1px solid #BD362F") return false; }else if(na){ $(".spa1").text(""); return true; } }else{ $(".spa1").text(""); } } if($(this).is("#userName")){ //姓名判断是否为空 var na=/^[\u4E00-\u9FA5]{2,4}$/ if($("#userName").val()==""){ if(!(na.test($("#userName").val()))){ $(".spa1").text("用户名不能为空"); $(this).css("border","1px solid #BD362F") return false; }else if(na){ $(".spa1").text(""); return true; } }else{ $(".spa1").text(""); } } if($(this).is("#password")){ //密码判断 var wp=/^[a-zA-Z]\w{5,17}$/ if($("#password").val()!=""){ if(!(wp.test($("#password").val()))){ $(".spa4").text("请输入以字母开头,6~18位字符"); $(this).css("border","1px solid #BD362F") return false; }else if(wp){ $(".spa4").text(""); return true; } }else{ $(".spa4").text(""); } } if($(this).is("#password")){ //密码是否判断 var wp=/^[a-zA-Z]\w{5,17}$/ if($("#password").val()==""){ if(!(wp.test($("#password").val()))){ $(".spa4").text("密码不能为空！"); $(this).css("border","1px solid #BD362F") return false; }else if(wp){ $(".spa4").text(""); return true; } }else{ $(".spa4").text(""); } } }) /********************** 聚焦提示 ************************/ $("input").focus(function(){ if($(this).is("#userName")){ $(".spa1").text("2-4个汉字").css("color","#aaa") $(this).css("border","1px solid #aaa") } if($(this).is("#password")){ $(".spa4").text("以字母开头,6~18位字符").css("color","#aaa") $(this).css("border","1px solid #aaa") } }) /*********************** 提交验证 ***************************/ $("#sub").click(function(){ var na=/^[\u4E00-\u9FA5]{2,4}$/; //用户名正则 var wp=/^[a-zA-Z]\w{5,17}$/; //密码正则 if(na.test($("#userName").val()) &&wp.test($("#password").val())){ return true; }else{ if($("#userName").val()==""){ $(".spa1").text(‘请输入用户名‘) } if($("#password").val()==""){ $(".spa4").text(‘请输入密码‘) } } }) </script> <script> function validate() { var password = document.getElementById("password").value; var password1 = document.getElementById("password1").value; <!-- 对比两次输入的密码 --> if(password == password1) { document.getElementById("tishi").innerHTML="<font color=‘green‘>两次密码相同</font>"; document.getElementById("button").disabled = false; } else { document.getElementById("tishi").innerHTML="<font color=‘red‘>两次密码不相同</font>"; document.getElementById("button").disabled = true; } } </script> </div> </div> </body> </html>