js表单验证代码,非常简单_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

一个非常简单的js表单验证代码，适合js新手看看。大神请绕道。
仅仅验证了常见的一些东西，电子邮件验证也没有涉及到正则表达式。
运行下面代码查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的js表单验证 - 我爱模板网</title> <style> body{font-family:"微软雅黑"; font-size:12px;} .w_span{ /*错误的样式*/ background:url('http://www.5imoban.net/view/demoimg/wrong_icon.png') no-repeat left center; display:inline-block; color:red; padding-left:20px; height:20px; line-height:20px; margin-left:2px; } .r_span{ /*正确的样式*/ background:url('http://www.5imoban.net/view/demoimg/right_icon.png') no-repeat left center; display:inline-block; color:#090; padding-left:30px; height:20px; line-height:20px; margin-left:2px; } </style> <script> var checkPost = function(){ var flag = true; //验证用户名 var username = document.getElementById("username"); var span_username = document.getElementById("span_username"); if(username.value.length <= 5){ username.style.border = "1px solid red"; span_username.innerHTML = "用户名未填写或者太短了!"; span_username.setAttribute("class","w_span"); flag = false; }else{ //正确的话,不能设置flag=true,否则如果其他地方错误,flag会在正确的里面又被设置成了true username.style.border = "1px solid green"; span_username.innerHTML = "用户名填写正确!"; span_username.setAttribute("class","r_span"); } //验证密码 var password = document.getElementById("password"); var span_password = document.getElementById("span_password"); if(password.value.length <= 5){ password.style.border = "1px solid red"; span_password.innerHTML = "密码未填写或太短!"; span_password.setAttribute("class","w_span"); flag = false; }else{ password.style.border = "1px solid green"; span_password.innerHTML = "密码填写正确!"; span_password.setAttribute("class","r_span"); } //验证性别 var sex = document.getElementsByName("sex"); var span_sex = document.getElementById("span_sex"); var sex_flag = false; //注意,这里是i<sex.length,不是<= for(var i=0;i<sex.length;i++){ if(sex[i].checked == true){ sex_flag = true; break; } } if(sex_flag){ span_sex.innerHTML = "性别选择正确!"; span_sex.setAttribute("class","r_span"); }else{ span_sex.innerHTML = "性别未选择!"; span_sex.setAttribute("class","w_span"); } //验证爱好 var fav = document.getElementsByName("fav[]"); var span_fav = document.getElementById("span_fav"); //爱好至少选择两个 var num = 0; for(var i=0;i<fav.length;i++){ if(fav[i].checked == true){ num++; } } if(num < 2){ span_fav.innerHTML = "请至少选择两个!"; span_fav.setAttribute("class","w_span"); flag = false; }else{ span_fav.innerHTML = "爱好选择正确!"; span_fav.setAttribute("class","r_span"); } //验证年月 var span_born = document.getElementById("span_born"); var year = document.getElementById("year"); var month = document.getElementById("month"); if(year.value == "" || month.value == ""){ span_born.innerHTML = "出生年月未选择!"; span_born.setAttribute("class","w_span"); flag = false; }else{ span_born.innerHTML = "出生年月已选择!"; span_born.setAttribute("class","r_span"); } //验证电子邮件 var email = document.getElementById("email"); var span_email = document.getElementById("span_email"); if(email.value == ""){ span_email.innerHTML = "请填写邮箱地址!"; span_email.setAttribute("class","w_span"); flag = false; }else if(email.value.indexOf("@") == -1){ span_email.innerHTML = "邮箱地址格式不正确!"; span_email.setAttribute("class","w_span"); flag = false; }else{ span_email.innerHTML = "邮箱地址填写正确!"; span_email.setAttribute("class","r_span"); } //验证城市 var city = document.getElementById("city"); var span_city = document.getElementById("span_city"); if(city.value == ""){ span_city.setAttribute("class","w_span"); span_city.innerHTML = "城市未选择!"; flag = false; }else{ span_city.innerHTML = "城市选择正确!"; span_city.setAttribute("class","r_span"); } //简介 var des = document.getElementById("des"); var span_des = document.getElementById("span_des"); if(des.value <= 10){ span_des.innerHTML = "简历不能少于10个字!"; span_des.setAttribute("class","w_span"); flag = false; }else{ span_des.innerHTML = "简历填写正确!"; span_des.setAttribute("class","r_span"); } return flag; } </script> </head> <body> <form method="post" onsubmit="return checkPost()" action="http://www.5imoban.net/index.php" enctype="multipart/form-data"> <table width="572" height="460" cellspacing="0" cellpadding="3" border="1"> <tr> <td width="80px">用户名</td> <td> <input type="text" name="username" id="username" /> <span id="span_username"></span> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="password" id="password" /> <span id="span_password"></span> </td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="m" />男 | <input type="radio" name="sex" value="f" />女 <span id="span_sex"></span> </td> </tr> <tr> <td>爱好:</td> <td class="fav_td"> <input type="checkbox" name="fav[]" value="sports" />体育  <input type="checkbox" name="fav[]" value="reading" />阅读  <input type="checkbox" name="fav[]" value="shoping" />购物  <input type="checkbox" name="fav[]" value="CF" />CF游戏 <span id="span_fav"></span> </td> </tr> <tr> <td>生日:</td> <td> <select id="year" name="year"> <option value="">---请选择---</option> <option value="1991">1991年</option> </select>年  <select id="month" name="month"> <option value="">---请选择---</option> <option value="1">1月</option> <option value="2">2月</option> </select>月 <span id="span_born"></span> </td> </tr> <tr> <td>Email:</td> <td> <input type="text" name="email" id="email" /> <span id="span_email"></span> </td> </tr> <tr> <td>城市:</td> <td> <select id="city" name="city"> <option value="">---请选择---</option> <option value="hefei">合肥市</option> <option value="anqing">安庆市</option> </select> <span id="span_city"></span> </td> </tr> <tr> <td>简介:</td> <td> <textarea name="description" id="des" cols="25" rows="4"></textarea> <span id="span_des"></span> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="亲,请点击注册哦!"> <span id="span_username"></span> </td> </tr> </table> </form> </body> </html>
提示：您可以先修改部分代码再运行