这篇文章主要介绍“javascript怎么实现表单验证”，在日常操作中，相信很多人在JavaScript怎么实现表单验证问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript怎么实现表单验证”的疑
这篇文章主要介绍“javascript怎么实现表单验证”，在日常操作中，相信很多人在JavaScript怎么实现表单验证问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript怎么实现表单验证”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
html表单（fORM）通常用于收集用户信息，例如姓名，电子邮件地址，位置，年龄等。
但是很可能某些用户可能不会输入您期望的数据。HTML表单验证可以通过JavaScript完成。
为了避免对服务器资源造成不必要的压力，您可以使用JavaScript在客户端（用户系统）上验证表单数据，不正确的信息是不会提交给后台服务器的——这是所谓客户端验证。本文将介绍这种验证
【表单验证一般分为两种方式。
客户端验证：直接在客户端执行js进行验证，验证的过程中和服务器端没有任何的交互
服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端
这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。】
例1、一个简单示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>表单验证简单示例</title></head><head><script>function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x==""){ //alert("姓名必须填写"); usernameerror.innerHTML="<font color='red'>姓名必须填写</font>"; return false; }else{ usernameerror.innerHTML="正确"; return true; } }</script></head><body><!-- <form name="myForm" action="demo-form.PHP" onsubmit="return validateForm()" method="post">--><form name="myForm" onsubmit="return validateForm()" >姓名: <input type="text" name="fname" id="username"><span id="usernameerror"></span><br><input type="submit" value="提交"><input type="reset" value="重置"></form> </body></html>保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
例2、一个复杂点的示例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表单验证示例注册用户</title> <style type="text/CSS"> </style> <script> function checkusername() { var myform = document.getElementById("form1"); var username = myform.username.value.length; if(username < 1||username>12) { errusername.innerHTML = "<font color='red'>用户名不符合要求</font>"; return false; }else{ errusername.innerHTML = "<font color='green'>用户名符合要求</font>"; return true; } } function checkage() { var myform = document.getElementById("form1"); var age = myform.age.value; if(age != parseInt(age)) { errage.innerHTML = "<font color='red'>年龄不符合要求</font>"; return false; }else{ errage.innerHTML = "<font color='green'>年龄符合要求</font>"; return true; } } function checkemail() { var myform = document.getElementById("form1"); var mail=/^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; if(!mail.test(myform.email.value)) { erremail.innerHTML = "<font color='red'>email不符合要求</font>"; return false; }else{ erremail.innerHTML = "<font color='green'>email符合要求</font>"; return true; } } function checkform() { checkusername();checkage();checkemail(); if(checkusername()&&checkage()&&checkemail()) { return true; }else{ return false; } } </script></head> <body><!-- <form id="form1" name="form1" method="post" action="ttt.jsp" onsubmit="return checkform()">--> <form id="form1" name="form1" method="post" onsubmit="return checkform()"><table width="777" border="0" cellpadding="1" cellspacing="1"> <tr> <td colspan="3" ><div align="center">请输入你的注册信息</div></td> </tr> <tr> <td width="250" ><div align="right" >请输入你的用户名：</div></td> <td width="250"><div align="center"> <input type="text" name="username" onblur="checkusername()" /> </div></td> <td><div id="errusername" align="center"></div></td> </tr> <tr> <td width="250"><div align="right">请输入你的年龄：</div></td> <td width="250"><div align="center" > <label> <input type="text" name="age" onblur="checkage()"/> </label> </div></td> <td><div align="center" id="errage"></div></td> </tr> <tr> <td width="250"><div align="right" >请输入你的EMAIL:</div></td> <td width="250"><div align="center" > <label> <input type="text" name="email" onblur="checkemail()" /> </label> </div></td> <td><div align="center" id="erremail"></div></td> </tr> <tr> <td><div align="right"> <label> <input type="submit" name="Submit" value="提交" /> </label> </div></td> <td><div align="center"> <label> <input type="reset" name="Submit2" value="重置" /> </label> </div></td> <td><div align="center"></div></td> </tr></table> </form> </body></html>保存文件名为：表单验证的例1.html
用浏览器运行测试之，效果如下：
到此，关于“JavaScript怎么实现表单验证”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: JavaScript怎么实现表单验证
本文链接: https://www.lsjlt.com/news/341421.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0