JavaScript 最佳表单验证-CSDN博客

这是一个用于注册会员的在线系统，提供了用户注册所需的各项信息输入框，包括用户名、密码、确认密码和电子邮箱，并对输入进行了验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>注册会员</title> <style type="text/css"> .table { border-collapse:collapse; font-size:12px; } .input { width:200px; height:22px; } .stats1 { color:#aaa; } .stats2 { color:#000; } .stats3 { color:red; } .stats4 { color:green; } </style> </head> <body> <form action="index.php" method="post" onSubmit="return regCheck('click')"> <table border="0" align="center" width="500" class="table"> <tr> <td width="80" height="25" align="right">用户名称：</td><td><input type="text" name="username" value="" class="input" /><span class="stats1"></span></td> </tr> <tr> <td width="80" height="25" align="right">密码：</td><td><input type="password" name="password" value="" class="input" /><span class="stats1"></span></td> </tr> <tr> <td width="80" height="25" align="right">确认密码：</td><td><input type="password" name="repass" value="" class="input" /><span class="stats1"></span></td> </tr> <tr> <td width="80" height="25" align="right">电子邮箱：</td><td><input type="text" name="email" value="" class="input" /><span class="stats1"></span></td> </tr> <tr> <td height="30"></td><td align="left"><input type="submit" name="send" value="提交" /><input type="reset" value="重置" /></td> </tr> </table> </form> </body> </html> <script language="javascript"> // 找到 input 后面的 SPAN 标签 function gspan(cobj){ while(true){ if(cobj.nextSibling.nodeName!="SPAN") cobj=cobj.nextSibling; else return cobj.nextSibling; } } function check(obj, info, fun, click){ var sp=gspan(obj); obj.οnfοcus=function(){ sp.innerHTML=info; sp.className="stats2"; } obj.οnblur=function(){ if(fun(this.value)){ sp.innerHTML="输入正确√"; sp.className="stats4"; }else{ sp.innerHTML=info; sp.className="stats3"; } } if(click=="click") obj.onblur(); } //页面加载完自动调用 οnlοad=regCheck function regCheck(click){ var stat=true; var username=document.getElementsByName("username")[0]; var password=document.getElementsByName("password")[0]; var repass=document.getElementsByName("repass")[0]; var email=document.getElementsByName("email")[0]; var other=document.getElementsByName("other")[0]; // 验证用户名 check(username, "用户名称为4-20位的英文字母或数字！", function(val){ if(val.match(/^\S+$/) && val.length >=4 && val.length <=20){ return true; }else{ stat=false; return false; } }, click); // 验证密码 check(password, "用户密码必须在6-20位之间！", function(val){ if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){ return true; }else{ stat=false; return false; } }, click); // 验证确认密码 check(repass, "确定密码要和上面一致!", function(val){ if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){ return true; }else{ stat=false; return false; } }, click) // 验证Email check(email, "请输入正确格式的电子邮箱！", function(val){ if(val.match(/\w+@\w+\.\w/)){ return true; }else{ stat=false; return false; } }, click) return stat; } </script>