JavaScript怎么实现表单验证
导读：本文共3553.5字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： HTML表单（form）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。但是很可能某些用户可能不会输入您期望的数据。HTML表单验证可以通过JavaScript完成。为了避免对服务器资源造成不必要的压力，您可以使用JavaScript在客户端（用户系统）上验证表单数据，不正确的信息是不会提交给后台服务器的——这... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。HTML表单（form）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。
但是很可能某些用户可能不会输入您期望的数据。HTML表单验证可以通过JavaScript完成。
为了避免对服务器资源造成不必要的压力，您可以使用JavaScript在客户端（用户系统）上验证表单数据，不正确的信息是不会提交给后台服务器的——这是所谓客户端验证。本文将介绍这种验证
【表单验证一般分为两种方式。
客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互
服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端
这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。】
例1、一个简单示例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>表单验证简单示例</title></head><head><script>functionvalidateForm(){varx=document.forms["myForm"]["fname"].value;if(x==null||x==""){//alert("姓名必须填写");usernameerror.innerHTML="<fontcolor='red'>姓名必须填写</font>";returnfalse;}else{usernameerror.innerHTML="正确";returntrue;}}</script></head><body><!--<formname="myForm"action="demo-form.php"onsubmit="returnvalidateForm()"method="post">--><formname="myForm"onsubmit="returnvalidateForm()">姓名:<inputtype="text"name="fname"id="username"><spanid="usernameerror"></span><br><inputtype="submit"value="提交"><inputtype="reset"value="重置"></form></body></html>保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
例2、一个复杂点的示例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表单验证示例注册用户</title><styletype="text/css"></style><script>functioncheckusername(){varmyform=document.getElementById("form1");varusername=myform.username.value.length;if(username<1||username>12){errusername.innerHTML="<fontcolor='red'>用户名不符合要求</font>";returnfalse;}else{errusername.innerHTML="<fontcolor='green'>用户名符合要求</font>";returntrue;}}functioncheckage(){varmyform=document.getElementById("form1");varage=myform.age.value;if(age!=parseInt(age)){errage.innerHTML="<fontcolor='red'>年龄不符合要求</font>";returnfalse;}else{errage.innerHTML="<fontcolor='green'>年龄符合要求</font>";returntrue;}}functioncheckemail(){varmyform=document.getElementById("form1");varmail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!mail.test(myform.email.value)){erremail.innerHTML="<fontcolor='red'>email不符合要求</font>";returnfalse;}else{erremail.innerHTML="<fontcolor='green'>email符合要求</font>";returntrue;}}functioncheckform(){checkusername();checkage();checkemail();if(checkusername()&&checkage()&&checkemail()){returntrue;}else{returnfalse;}}</script></head><body><!--<formid="form1"name="form1"method="post"action="ttt.jsp"onsubmit="returncheckform()">--><formid="form1"name="form1"method="post"onsubmit="returncheckform()"><tablewidth="777"border="0"cellpadding="1"cellspacing="1"><tr><tdcolspan="3"><divalign="center">请输入你的注册信息</div></td></tr><tr><tdwidth="250"><divalign="right">请输入你的用户名：</div></td><tdwidth="250"><divalign="center"><inputtype="text"name="username"onblur="checkusername()"/></div></td><td><divid="errusername"align="center"></div></td></tr><tr><tdwidth="250"><divalign="right">请输入你的年龄：</div></td><tdwidth="250"><divalign="center"><label><inputtype="text"name="age"onblur="checkage()"/></label></div></td><td><divalign="center"id="errage"></div></td></tr><tr><tdwidth="250"><divalign="right">请输入你的EMAIL:</div></td><tdwidth="250"><divalign="center"><label><inputtype="text"name="email"onblur="checkemail()"/></label></div></td><td><divalign="center"id="erremail"></div></td></tr><tr><td><divalign="right"><label><inputtype="submit"name="Submit"value="提交"/></label></div></td><td><divalign="center"><label><inputtype="reset"name="Submit2"value="重置"/></label></div></td><td><divalign="center"></div></td></tr></table></form></body></html>保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JavaScript怎么实现表单验证的详细内容，希望对您有所帮助，信息来源于网络。