首页 > 代码库 > javascript表单基本验证
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=http://www.mamicode.com/=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="http://www.mamicode.com/小学" selected="selected" >小学</option>136 <option value="http://www.mamicode.com/初中" >初中</option>137 <option value="http://www.mamicode.com/高中" >高中</option>138 <option value="http://www.mamicode.com/大学" >大学</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="http://www.mamicode.com/提交"155 style="font-size:18px; color:#000;background-color:#FC0;margin-left:550px; border-color:#00F"/>156 <input type="reset" value="http://www.mamicode.com/重置" 157 style="font-size:18px; color:#000;background-color:#FC0;margin-left:60px;border-color:#00F"/> 158 <br/><br/> 159 </form>160 <img src="http://www.mamicode.com/images/mooc.png" style="margin-top:-2px">161 162 </body>163 </html>
javascript表单基本验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。