javascript表单基本验证
javascript设置表单基本验证
效果图如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head > 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>用户注册</title> 6 <style type="text/css"> 7 body{ 8 background-color:#FFF; 9 background-image:url(images/1616.jpg); 10 background-repeat:no-repeat; 11 background-size:1400px 230px; 12 } 13 #box{ 14 font-size:20px; 15 color:#05032C; 16 margin-left:450px; 17 font-weight:570; 18 } 19 span{ 20 color:#333; 21 font-size:12px; 22 } 23 24 </style> 25 <script type="text/javascript"> 26 var flag= new Array(false,false,false,false); 27 //判断用户名 28 function test1(){ 29 flag[0]=false; 30 var name = document.getElementById("name"); 31 var span1= document.getElementById("span1"); 32 if((name.value.length>=2 &&name.value.length<=4)&&(/^[\u4e00-\u9fff]*$/.test(name.value))){ 33 //span1.style.display="none"; 34 span1.style.color="white"; 35 flag[0]=true; 36 }else{ 37 span1.style.color="red"; 38 flag[0]=false; 39 } 40 } 41 //判断手机号码 42 function test2(){ 43 flag[1]=false; 44 var tel = document.getElementById("tel"); 45 var span2= document.getElementById("span2"); 46 if(/^1(3|5|7|9)\d{9}$/.test(tel.value)){ 47 span2.style.color="white"; 48 flag[1]=true; 49 }else{ 50 span2.style.color="red"; 51 flag[1]=false; 52 } 53 } 54 //判断密码 55 function test3(){ 56 flag[2]=false; 57 var password = document.getElementById("password"); 58 var span3= document.getElementById("span3"); 59 if((password.value.length>=6)&&(password.value.length<=20) 60 &&(/^[a-zA-Z][a-zA-Z0-9_]*$/.test(password.value))){ 61 span3.style.color="white"; 62 flag[2]=true; 63 }else{ 64 span3.style.color="red"; 65 flag[2]=false; 66 } 67 } 68 //确认密码 69 function test4(){ 70 flag[3]=false; 71 var password = document.getElementById("password"); 72 var repassword = document.getElementById("repassword"); 73 var span4= document.getElementById("span4"); 74 if(((repassword.value!=null)&&(repassword.value!=""))&&(repassword.value==password.value)){ 75 span4.style.color="white"; 76 flag[3]=true; 77 }else{ 78 span4.style.color="red"; 79 flag[3]=false; 80 } 81 } 82 //登录判断 83 function reg(){ 84 var count=0; 85 for(var i=0;i<flag.length;i++){ 86 if(flag[i]==true){ 87 count++; 88 if(count==flag.length){ 89 return true; 90 } 91 } 92 } 93 return false; 94 } 95 96 </script> 97 </head> 98 <body id="body"> 99 <form action="计时器.html" method="post" style="color:#0F0; font-size:36px" onsubmit="return reg()" > 100 <table id="box"><br/><br/><br/><br/><br/><br/> 101 <tr> 102 <td>用 户 名：</td> 103 <td><input id="name" type="text" onblur="test1()" style="border-color:#339"/> 104 <span id="span1"> 必须输入汉字名称</span> 105 </td> 106 </tr> 107 <tr> 108 <td>手机号码：</td> 109 <td><input id="tel" type="text" onblur="test2()" style="border-color:#339" /> 110 <span id="span2"> 手机号码必须满足条件</span> 111 </td> 112 </tr> 113 <tr> 114 <td>输入密码：</td> 115 <td><input id="password" type="password" onblur="test3()" style="border-color:#339"/> 116 <span id="span3"> 英文字母开头，只含有英文字母、数字和下划线字母,长度不小于6</span> 117 </td> 118 </tr> 119 <tr> 120 <td>确认密码：</td> 121 <td><input id="repassword" type="password" onblur="test4()"style="border-color:#339" /> 122 <span id="span4"> 两次密码输入必须一致</span> 123 </td> 124 </tr> 125 <tr> 126 <td>性 别：</td> 127 <td><input type="radio" name="gender" checked="checked" />男 128 <input type="radio" name="gender" />女 129 </td> 130 </tr> 131 <tr> 132 <td>学 历：</td> 133 <td> 134 <select name="学历" >学历 135 <option value="小学" selected="selected" >小学</option> 136 <option value="初中" >初中</option> 137 <option value="高中" >高中</option> 138 <option value="大学" >大学</option> 139 </select> 140 141 </td> 142 </tr> 143 <tr> 144 <td>爱 好：</td> 145 <td> 146 <input type="checkbox" name="love" checked="checked"/>上网 147 <input type="checkbox" name="love" />蓝球 148 <input type="checkbox" name="love" />足球 149 <input type="checkbox" name="love" />爬山 150 <input type="checkbox" name="love" />读书 151 </td> 152 </tr> 153 </table> 154 <input type="submit" value="提交" 155 style="font-size:18px; color:#000;background-color:#FC0;margin-left:550px; border-color:#00F"/> 156 <input type="reset" value="重置" 157 style="font-size:18px; color:#000;background-color:#FC0;margin-left:60px;border-color:#00F"/> 158 <br/><br/> 159 </form> 160 <img src="images/mooc.png" style="margin-top:-2px"> 161 162 </body> 163 </html>
