js正则表达式处理表单
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!--<meta name="viewport"--> 6 <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">--> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/reset.css"> 10 <link rel="stylesheet" href="css/register.css"> 11 12 <script src="lib/jquery/jquery-1.12.4.js"></script> 13 <script type="text/javascript"> 14 //验证用户名 15 function user(){ 16 //获取所填的信息值 17 var name = document.getElementById("txtname").value; 18 var reg = /^[a-zA-Z0-9\u4E00-\u9FA5]{2,6}$/;//定义约束,要求输入英文,数字,下划线,中文 19 if(!reg.test(name)){ 20 span_name.innerHTML = "请输入英文,数字,下划线,中文"; 21 }else{ 22 span_name.innerHTML="格式正确";//验证通过后提示 23 } 24 } 25 26 function passWord(){ 27 var pwd = document.getElementById("txtpwd").value; 28 var reg = /^[\d\w]{6,12}$/; 29 if(!reg.test(pwd)){ 30 span_pwd.innerHTML = "0至12以内数字,字母或组合"; 31 }else{ 32 span_pwd.innerHTML="格式正确"; 33 } 34 } 35 36 function iphone(){ 37 var userTel = document.getElementById("txttel").value; 38 var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/; 39 if(!reg.test(userTel)){ 40 span_tel.innerHTML="请输入正确的手机号"; 41 }else{ 42 span_tel.innerHTML="格式正确"; 43 } 44 } 45 46 </script> 47 </head> 48 <body style="background-color:rgb(153,204,255);width: 1920px;height: 800px;overflow: scroll;overflow-x: hidden"> 49 <div id="container" class="container overflow"> 50 <div class="header"> 51 <ul class="header_menu"> 52 <li><a class="menu_format" href="login.php">渔乐</a></li> 53 <li><a class="menu_format" href="index.php">主页</a></li> 54 <li><a class="menu_format" href="about.html">关于</a></li> 55 <li><a class="menu_format" href="faq.html">FAQ</a></li> 56 <li><a class="menu_format" href="download.html">下载</a></li> 57 </ul> 58 </div> 59 60 <div class="content"> 61 <div class="register"> 62 <div class="nav"> 63 <a href="login.php">登录</a> 64 <a href="register.php">注册</a> 65 </div> 66 <form action="reg.php" method="post" onsubmit="return check()"> 67 <div class="format"> 68 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box"> 69 <div class="register_icon "></div> 70 <input class="register_input" type="text" required placeholder="昵称" name="userName" id = "txtname" onBlur="user()"> 71 </div> 72 <label class="register_label" id="span_name"></label> 73 </div> 74 75 <div class="format"> 76 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box"> 77 <div class="register_icon2"></div> 78 <input class="register_input" type="password" required placeholder="密码(6-16个字符组成,区别大小写)" name="userPassword" id = "txtpwd" onBlur="passWord()"> 79 </div> 80 <label class="register_label" id="span_pwd"></label> 81 </div> 82 83 <div class="format"> 84 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box"> 85 <div class="register_icon3"></div> 86 <input class="register_input" type="tel" required placeholder="填写常用手机号码" name="userTel" id="txttel" onBlur="iphone()"> 87 </div> 88 <label class="register_label" id="span_tel"></label> 89 </div> 90 91 <div class="format"> 92 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box"> 93 <div class="register_icon4"> 94 <!--通过增加或者减少display2Block类来实现按钮的切换--> 95 <a id="toggle1" class="display display2Block " href="#" style="width: 100%;height: 100%;background-color:#09f;">点击获取</a> 96 <a id="toggle2" class="display " href="#" style="width: 100%;height: 100%;"><p style="display: inline">60</p>秒后重新获取</a> 97 </div> 98 <input class="register_input register_input2" type="text" required placeholder="请输入短信验证码" name="VerificationCode"> 99 </div> 100 <label class="register_label">验证码错误</label> 101 </div> 102 <div class="format register_button"> 103 <input class="register_button" value="注册" type="submit" style="border: none;"> 104 </div> 105 </form> 106 <div class="outLink"> 107 <div class="outLink_tips"></div> 108 <div class="register2QQ"> 109 <a href="" style="display: block;width: 40px;height: 33px;"></a> 110 </div> 111 <div class="register2WX"> 112 <a href="#" style="display: block;width: 40px;height: 33px;"></a> 113 </div> 114 </div> 115 </div> 116 117 </div> 118 </div> 119 120 121 <script src="js/register.js"></script> 122 <script src="js/pagescreen.js"></script> 123 </body> 124 </html>