这篇文章主要介绍JavaScript实现表单验证的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在JavaScript中我们可以在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。客户端表单验证通常使用javascript完成,对于大多数用户来说,JavaScript表单验证将节省大量时间,但是如果用户关闭了JavaScript,则仍需要仔细检查服务器上的数据。通常有JavaScript检查的表单数据有:
(1)用户是否已填写表单中的必填项目
(2)用户输入的邮件地址是否合法
(3)用户是否已输入正确格式的密码
(4)用户是否在数据域 中输入了文本
接下来将通过实际案例告诉大家JavaScript中表单验证如何使用
html代码
<table style="width:350px;height:200px;margin: 100px auto;border:1px solid #ccc;"> <tr> <td> 用户名:<input type="text" name="username" id="txt"> </td> <td id="sure"></td> </tr> <tr> <td> 密码 :<input type="password" name="password" id="mima"> </td> <td id="sure1"></td> </tr> </table>
验证用户名和密码的输入是否出错
<script type="text/javascript"> var txt=document.getElementById("txt"); var sure=document.getElementById("sure"); var mima=document.getElementById("mima"); var sure1=document.getElementById("sure1"); txt.onblur=function(){ if(this.value=="") { sure.style.display="block"; sure.style.color="red"; sure.innerHTML="输入内容不能为空"; } else if((txt.value.length<3)||(txt.value.length>8)){ sure.style.display="block"; sure.style.color="red"; sure.innerHTML="您输入的用户名是错误的长度"; } else{ sure.style.display="block"; sure.style.color="#444" sure.innerHTML="输入正确"; } } mima.onblur=function(){ if(this.value=="") { sure1.style.display="block"; sure1.style.color="red"; sure1.innerHTML="输入内容不能为空"; } else if((txt.value.length<3)||(txt.value.length>8)){ sure1.style.display="block"; sure1.style.color="red"; sure1.innerHTML="您输入的密码是错误的长度"; } else if(isNaN(this.value)){ sure1.style.display="block"; sure1.style.color="red"; sure1.innerHTML="请输入数字"; } else{ sure1.style.display="block"; sure1.style.color="#444" sure1.innerHTML="输入正确"; } }
输入内容为错误时
以上是JavaScript实现表单验证的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!
网站栏目:JavaScript实现表单验证的方法-创新互联
当前链接:https://www.cdcxhl.com/article6/diioig.html
成都网站建设公司_创新互联,为您提供虚拟主机、App开发、网站改版、品牌网站制作、网站排名、网站收录
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联