JavaScript - 表单验证实例
表单验证1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单验证</title> <script type="text/javascript"> //用户名非空，长度为6-14，只能包含数字、字母、下划线 function checkUsername(){ var username=document.getElementById("username").value; var usernameinfo=document.getElementById("usernameinfo"); //alert(username.length); for(var i=0;i<username.length;i++){ var s=username.toLowerCase().substring(i,i+1); if(!(s>=0&&s<=9)&&!(s>="a"&&s<="z")&&(s!="_")){ usernameinfo.innerHTML="用户名只能包含数字、字母、下划线!"; usernameinfo.style.color="#f00"; }else{ usernameinfo.innerHTML=""; } } if(username==""){ usernameinfo.innerHTML="用户名不能为空！"; usernameinfo.style.color="#f00"; }else if(username.length<6||username.length>14){ usernameinfo.innerHTML="用户名长度在6-14之间！"; usernameinfo.style.color="#f00"; }else{ usernameinfo.innerHTML=""; } } </script></head><body> <form action="success.html" method="post"> 名字：<input type="text" id="username" onblur="checkUsername();"/><span id="usernameinfo"></span><br/> 出生日期： <select id="year"> <option value="0">--年--</option> <script type="text/javascript"> for(var i=1900;i<=new Date().getFullYear();i++){ document.write("<option value="+i+">"+i+"</option>"); } </script> </select> <select id="month"> <option value="0">--月--</option> <script type="text/javascript"> for(var i=1;i<=12;i++){ document.write("<option value="+i+">"+i+"</option>"); } </script> </select> <select id="day"> <option value="0">--日--</option> <script type="text/javascript"> for(var i=1;i<=31;i++){ document.write("<option value="+i+">"+i+"</option>"); } </script> </select> </form> <br/> <input type="submit" value="注册" /></body></html>表单验证2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>表单验证</title><script type="text/javascript"> //校验输入 function checkInput(){ var flag=false; var username=$("username").value; var pwd=$("pwd").value; var repwd=$("repwd").value; var email=$("email").value; if(username==""){ alert("用户名不能为空！"); }else if(pwd==""){ alert("密码不能为空！"); }else if(pwd.length<6){ alert("密码必须大于6位"); }else if(pwd!=repwd){ alert("密码不一致！"); }else if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){ alert("邮箱格式不正确！"); }else{ flag=true; } //限定用户名不能包含数字 for(var i=0;i<username.length;i++){ var s=username.substring(i,i+1); if(!isNaN(s)){ alert("用户名不能包含数字！") return false; } } return flag; } //获取焦点时清除原内容 function clearUsername(){ var username=$("username"); username.style.border="1px solid #f00"; if(username.value=="请输入正确的用户名"){ username.value=""; } } //失去焦点时检验用户名 function checkUsername(username){ username.style.border=""; if(username.value==""){ $("usernameinfo").style.font="normal 15px 宋体"; $("usernameinfo").style.color="#f00"; $("usernameinfo").innerHTML="用户名不能为空"; username.focus(); }else if(username.value.length>14||username.value.length<6){ $("usernameinfo").style.font="normal 15px 宋体"; $("usernameinfo").style.color="#F00"; $("usernameinfo").innerHTML="用户名长度必须在6-14之间！"; //username.select();//此代码在IE和Chrome中好使，在Firefox中不好使 //匿名函数 setTimeout(function(){username.select();},0); }else{ $("usernameinfo").innerHTML=""; } } function $(id){ return document.getElementById(id); }</script></head><body><form action="success.html" method="post" onsubmit="return checkInput();"> <table border="0" cellpadding="0" cellspacing="0" width="600px"> <tr> <td align="right">用户名：</td> <td><input type="text" name="userbname" id="username" value="请输入正确的用户名" onfocus="clearUsername()" onblur="checkUsername(this)"/><span id="usernameinfo"></span></td> </tr> <tr> <td align="right">密码：</td> <td><input type="password" name="pwd" id="pwd"/></td> </tr> <tr> <td align="right">确认密码：</td> <td><input type="password" name="repwd" id="repwd"/></td> </tr> <tr> <td align="right">电子邮箱：</td> <td><input type="text" name="email" id="email"/><br/></td> </tr> <tr> <td></td> <td> <input type="submit" value="注册"/> <input type="reset" value="重置"/></td> </tr> </table></form></body></html>